/**
 * Project iLinkWorld
 * File UbaFormScreen
 * Path screens/wallet/user
 * Created by BRICE ZELE
 * Date: 01/02/2022
 */
import React, {useEffect, useRef, useState} from 'react';
import {
    ActivityIndicator,
    Alert,
    Dimensions,
    FlatList,
    KeyboardAvoidingView,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View,
} from 'react-native';
import {connect, useDispatch} from 'react-redux';
import {Color} from "../../../config/Color";
import I18n from 'react-native-i18n';
import {ScreenComponent} from "../../../components/ScreenComponent";
import {
    fetchAcceptRejectConsultation,
    fetchActivePaySubscription,
    fetchDemaneAutorisationSoin,
    fetchGetListInsuranceWithBeneficiaries,
    fetchGetNetworkActs,
    fetchGetUserByIdQRCode,
    fetchGetUserByNameOrNumber,
    fetchGetUserByNameOrNumberReset
} from "../../../redux/insurance/insurance.actions";
import DropdownAlert from "react-native-dropdownalert";
import {createStructuredSelector} from "reselect";
import {
    selectActivatePaySubscription,
    selectDemandeAutorisationSoin,
    selectGetConsultation,
    selectGetNetworkAct,
    selectGetUserByIdQRCode,
    selectGetUserByNameOrNumber,
    selectInsuranceList,
    selectSubscriptionList
} from "../../../redux/insurance/insurance.selector";
import Text from '../../../components/Text';
import Dialog from "react-native-dialog";
import {store} from "../../../redux/store";
import {useFormik} from "formik";
import {responsiveWidth} from "react-native-responsive-dimensions";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Button from "../../../components/Button";
import * as Yup from "yup";
import SpinnerOverlay from "../../../components/SpinnerOverlayComponent";
import Modal from "react-native-modal";
import QRCodeScanner from "react-native-qrcode-scanner";
import {RNCamera} from "react-native-camera";
import TextInput from "../../../components/TextInput";
import Icon from "react-native-vector-icons/FontAwesome5";
import SwitchSelector from "react-native-switch-selector";
import StepHeader from "../../../components/StepHeaderComponent";
import Wizard from "react-native-wizard";
import {readUser} from "../../../webservice/AuthApi";
import Fontisto from "react-native-vector-icons/Fontisto";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";


let moment = require('moment-timezone');

const {width, height} = Dimensions.get('window');

const UbaFormScreen = ({
                                           navigation,
                                           fetchGetNetworkActs,
                                           fetchAcceptRejectConsultation,
                                           fetchGetListInsuranceWithBeneficiaries,
                                           fetchDemaneAutorisationSoin,
                                           fetchGetUserByIdQRCode,
                                           fetchGetUserByNameOrNumber,
                                           getConsultation,
                                           getUserByNameOrNumber,
                                           getUserByIdQRCode,
                                           insuranceList,
                                           getNetworkAct,
                                           subscriptionList,
                                           demandeAutorisationSoin
                                       }) => {
    const dispatch = useDispatch();
    const [user, setUser] = useState(null);
    const wizard = useRef();
    const [isFirstStep, setIsFirstStep] = useState(true);
    const [isLastStep, setIsLastStep] = useState(false);
    const [currentStep, setCurrentStep] = useState(1);

    const [statutMatrimonial] = useState([
        {label: 'Célibataire', value: "C"},
        {label: 'Marié', value: "M"},
        {label: 'Veuf', value: "V"},
        {label: 'Divorcé', value: "D"},
    ]);

    let dropDownAlertRef: any = null;

    const RegisterSchema = Yup.object().shape({
        password: Yup.string()
    });

    useEffect(() => {
        readUser().then((user) => {
            setUser(user);
        });
    }, []);

    const {
        handleChange,
        handleSubmit,
        handleBlur,
        values,
        errors,
        touched,
        setFieldValue,
        setFieldTouched,
        isValid,
    } = useFormik({
        validationSchema: RegisterSchema,
        initialValues: {
            password: '',
            code_acte: '',
            firstname_patient: '',
            lastname_patient: '',
        },
        onSubmit: values => {

        },
    });


    const onNext = () => {
        switch (currentStep) {
            case 0:
                return true;
                break;

            default:
                return true;
        }
    };

    const stepList = [
        {
            title: 'Infos pers.',
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Noms et prénoms'
                        icon={
                            <FontAwesome
                                style={{zIndex: 10}}
                                name={'user'}
                                size={20}
                            />
                        }
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Nom marital'
                        icon={
                            <FontAwesome
                                style={{zIndex: 10}}
                                name={'user'}
                                size={20}
                            />
                        }
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Nationalité'
                        icon={
                            <Fontisto
                                style={{zIndex: 10}}
                                name='world'
                                size={20}
                            />
                        }
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Date de naissance'
                        icon={
                            <FontAwesome
                                style={{zIndex: 10}}
                                name='calendar'
                                size={20}
                            />
                        }
                    />
                    <View style={{
                        marginTop: 10,
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <TextInput
                            style={{width: responsiveWidth(40)}}
                            placeholder='Pays de naissance'
                            icon={
                                <Fontisto
                                    style={{zIndex: 10}}
                                    name='map-marker-alt'
                                    size={20}
                                />
                            }
                        />
                        <TextInput
                            style={{width: responsiveWidth(40)}}
                            placeholder='Ville de naissance'
                        />
                    </View>
                </View>
            ),
        },
        {
            title: 'Infos. des parents',
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Nom du père'
                        icon={
                            <MaterialCommunityIcons
                                style={{zIndex: 10}}
                                name={'human-male'}
                                size={20}
                            />
                        }
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Prénom du père'
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Nom de naissance de la mère'
                        icon={
                            <MaterialCommunityIcons
                                style={{zIndex: 10}}
                                name={'human-female'}
                                size={20}
                            />
                        }
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Prénom de la mère'
                    />
                </View>
            ),
        },
        {
            title: 'Statut matrimonial',
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Nom du conjoint'
                        icon={
                            <MaterialCommunityIcons
                                style={{zIndex: 10}}
                                name={'human-male'}
                                size={20}
                            />
                        }
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Prénom du conjoint'
                    />
                    <View style={{
                        marginTop: 10,
                        flexDirection: 'column',
                        justifyContent: "space-between"
                    }}>
                        <Text body2>Situation matrimonial</Text>
                        <View style={{width: responsiveWidth(90), marginTop: 10}}>
                            <SwitchSelector options={statutMatrimonial}
                                            disabled={true}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                                //setGender(value);
                                            }}/>
                        </View>
                    </View>
                </View>
            ),
        },
        {
            title: 'Employeur',
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder='Profession'
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder="Secteur d'activité économique"
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder="Sous-secteur d'activité"
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder="Numéro fiscal"
                    />
                    <View style={{
                        marginTop: 10,
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <TextInput
                            style={{marginTop: 10, width: responsiveWidth(40)}}
                            placeholder='Numéro matricule employé'
                        />
                        <TextInput
                            style={{marginTop: 10, width: responsiveWidth(40)}}
                            placeholder='Fonction'
                        />
                    </View>
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder="Nom de l'employeur"
                    />
                    <TextInput
                        style={{marginTop: 10, width: responsiveWidth(90)}}
                        placeholder="Adresse de l'employeur"
                    />
                </View>
            ),
        },
    ]

    return (
        <ScreenComponent>
            <DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
            <SpinnerOverlay show={getNetworkAct.loading}/>
            <KeyboardAvoidingView
                behavior={Platform.OS === 'android' ? 'height' : 'padding'}
                style={{flex: 1}}>

                <ScrollView style={{flex: 1}}>

                    <View style={styles.contain}>

                        <StepHeader
                            steps={stepList}
                            currentStepIndex={currentStep + 1}
                        />

                        <View
                            style={{
                                flexDirection: 'column',
                                alignItems: 'center',
                            }}>
                            <Wizard
                                ref={wizard}
                                activeStep={0}
                                steps={stepList}
                                useNativeDriver
                                nextStepAnimation="slideLeft"
                                prevStepAnimation="slideRight"
                                isFirstStep={val =>
                                    setIsFirstStep(val)
                                }
                                isLastStep={val =>
                                    setIsLastStep(val)
                                }
                                onNext={() => {
                                    onNext();
                                }}
                                onPrev={() => {
                                }}
                                currentStep={({
                                                  currentStep,
                                                  isLastStep,
                                                  isFirstStep,
                                              }) => {
                                    setCurrentStep(currentStep);
                                    setIsFirstStep(isFirstStep);
                                    setIsLastStep(isLastStep);
                                }}
                            />
                        </View>

                        <View style={styles.iconNavigation}>
                            {!isFirstStep ? (
                                <TouchableOpacity
                                    style={[
                                        styles.iconNavigationButton,
                                        {
                                            backgroundColor:
                                            Color.primaryColor,
                                            borderColor:
                                            Color.primaryColor,
                                        },
                                    ]}
                                    onPress={() =>
                                        wizard.current.prev()
                                    }>
                                    <Icon
                                        name="arrow-left"
                                        size={20}
                                        color={Color.whiteColor}
                                    />
                                </TouchableOpacity>
                            ) : (
                                <View/>
                            )}
                            {currentStep === stepList.length - 1 ? (
                                <Button
                                    onPress={handleSubmit}>
                                    {I18n.t('SUBMIT_LABEL')}
                                </Button>
                            ) : (
                                <TouchableOpacity
                                    style={[
                                        styles.iconNavigationButton,
                                        {
                                            backgroundColor:
                                            Color.primaryColor,
                                            borderColor:
                                            Color.primaryColor,
                                        },
                                    ]}
                                    onPress={e => {
                                        handleSubmit(e);
                                        if (onNext())
                                            wizard.current.next();
                                    }}>
                                    {(subscriptionList.loading || getUserByNameOrNumber.loading || getUserByIdQRCode.loading) ?
                                        <ActivityIndicator
                                            size="small"
                                            color="#fff"
                                        />
                                        : <Icon
                                            name="arrow-right"
                                            size={24}
                                            color={Color.whiteColor}
                                        />}
                                </TouchableOpacity>
                            )}
                        </View>
                    </View>
                </ScrollView>
            </KeyboardAvoidingView>

            {/*                {getConsultation.loading
                    ? renderLoader()
                    : getConsultation.result !== null ?
                        (
                            <FlatList
                                style={{flex: 1}}
                                ListEmptyComponent={() => {
                                    return (
                                        <Text>{I18n.t('NO_CONSULTATION_DEMAND')}</Text>
                                    )
                                }}
                                data={[]}
                                keyExtractor={(item, index) => item.id}
                                renderItem={({item, index}) => (
                                    renderItem(item)
                                )}
                            />
                        )
                        : null}*/}
        </ScreenComponent>
    )
};

const mapStateToProps = createStructuredSelector({
    subscriptionList: selectSubscriptionList,
    insuranceList: selectInsuranceList,
    activatePaySubscription: selectActivatePaySubscription,
    getConsultation: selectGetConsultation,
    getNetworkAct: selectGetNetworkAct,
    demandeAutorisationSoin: selectDemandeAutorisationSoin,
    getUserByNameOrNumber: selectGetUserByNameOrNumber,
    getUserByIdQRCode: selectGetUserByIdQRCode,
});

export default connect(mapStateToProps, {
    fetchActivePaySubscription,
    fetchGetNetworkActs,
    fetchAcceptRejectConsultation,
    fetchGetListInsuranceWithBeneficiaries,
    fetchDemaneAutorisationSoin,
    fetchGetUserByIdQRCode,
    fetchGetUserByNameOrNumber,
})(
    UbaFormScreen,
);
const styles = StyleSheet.create({
    textInput: {
        height: 46,
        backgroundColor: Color.fieldColor,
        borderRadius: 5,
        marginTop: 10,
        padding: 10,
        width: '100%',
    },
    lineRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingBottom: 20,
    },
    contain: {
        marginTop: 20,
        paddingBottom: 20,
        paddingLeft: 10,
        paddingRight: 10,
        flex: 1,
    },
    content: {
        padding: 10,
        marginBottom: 10,
        borderRadius: 8
    },
    contentTop: {
        flexDirection: "row",
        paddingBottom: 10,
        borderBottomWidth: 1
    },

    contentBottom: {
        flexDirection: "row",
        marginTop: 10,
        justifyContent: "space-between"
    },
    bottomLeft: {flexDirection: "row", alignItems: "center"},
    image: {width: 32, height: 32, marginRight: 10, borderRadius: 16},
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    ineSeparator: {
        borderWidth: 1,
        width: '40%',
        height: 1,
        alignSelf: 'center',
    },
    line: {
        width: 1,
        height: 14,
        backgroundColor: Color.grayColor,
        marginLeft: 10,
    },
    contentModeView: {
        width: 30,
        height: '100%',
        alignItems: 'flex-end',
        justifyContent: 'center',
    },
    contentFilter: {
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 10,
    },
    bottomModal: {
        justifyContent: 'flex-end',
        margin: 0,
    },
    contentFilterBottom: {
        width: "100%",
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        paddingHorizontal: 20
    },
    contentSwipeDown: {
        paddingTop: 10,
        alignItems: 'center',
    },
    lineSwipeDown: {
        width: 30,
        height: 2.5,
        backgroundColor: Color.dividerColor,
    },
    contentActionModalBottom: {
        flexDirection: "row",
        paddingVertical: 10,
        marginBottom: 10,
        justifyContent: "space-between",
        borderBottomWidth: 1
    },
    containModal: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    iconNavigation: {
        width: '100%',
        flexDirection: 'row',
        marginTop: 20,
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    iconNavigationButton: {
        borderWidth: 1,
        borderRadius: 25,
        width: 50,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center'
    },
    beneficiarySubSection: {
        marginTop: 10,
        flexDirection: 'row',
        width: '100%',
    }
});
