import React, {FC, useState} from "react";
import {StyleSheet, View} from "react-native";
import {useSelector} from "react-redux";
import {RootState} from "../../../redux/store";
import Modal from "react-native-modal";
import {background, blue} from "../../../css/colors";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import DTitle from "../../DTitle/DTitle";
import * as Progress from 'react-native-progress';
import {RFPercentage} from "react-native-responsive-fontsize";

const LoadingModal: FC = () => {
    const state = useSelector((state: RootState) => state.loadingModal);
    const [ch, sCh] = useState(false);
    return (
        <Modal isVisible={state.isVisible}>
            <View style={styles.container}>
                <DTitle style={{textAlign: "center"}}>{state.loadingText}</DTitle>
                <View style={styles.progressBarWrapper}>
                    <Progress.Circle size={RFPercentage(20)}
                                     color={blue}
                                     indeterminate={state.indeterminate}
                                     progress={state.progress}
                                     style={styles.progressBar}
                                     borderWidth={state.indeterminate ? responsiveWidth(1) : 0}
                                     thickness={responsiveWidth(1)}
                    />
                </View>

            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        alignSelf: "center",
        backgroundColor: background,
        width: responsiveWidth(80),
        height: responsiveHeight(50),
        borderRadius: responsiveWidth(2),
        paddingHorizontal: responsiveWidth(20),
        paddingVertical: responsiveHeight(10),
        justifyContent: "center",
        rowGap: responsiveHeight(5)
    },
    progressBarWrapper: {
        alignItems: "center"
    },
    progressBar: {
        justifyContent: "center"
    }
})
export default LoadingModal;