ilink-world/screens/wallet/agent/SaisirFeuilleSoinScreen.js

/**
 * Project iLinkWorld
 * File SaisirFeuilleSoinScreen
 * Path screens/wallet/agent
 * Created by BRICE ZELE
 * Date: 11/11/2021
 */
import React, {useEffect, useRef, useState} from 'react';
import {
    ActivityIndicator,
    Alert,
    Dimensions,
    FlatList,
    Keyboard,
    KeyboardAvoidingView,
    Platform,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View,
} from 'react-native';
import {connect, useDispatch} from 'react-redux';
import Dialog from "react-native-dialog";
import {Formik, useFormik} from 'formik';
import * as Yup from 'yup';
import {Color} from "../../../config/Color";
import I18n from 'react-native-i18n';
import {ScreenComponent} from "../../../components/ScreenComponent";
import Button from "../../../components/Button";
import {responsiveWidth} from "react-native-responsive-dimensions";
import {
    fetchActivePaySubscription,
    fetchActivePaySubscriptionReset,
    fetchAddDrug,
    fetchAddDrugReset,
    fetchCreateConsultation,
    fetchCreateConsultationReset,
    fetchGetAmountConsultation,
    fetchGetAmountConsultationReset,
    fetchGetDrugAppareil,
    fetchGetDrugAppareilReset,
    fetchGetNetworkActs,
    fetchGetNetworkActsReset,
    fetchGetProviderClass,
    fetchGetProviderClassReset,
    fetchGetSubscriptionList,
    fetchGetSubscriptionListReset,
    fetchGetUserByIdQRCode,
    fetchGetUserByIdQRCodeReset,
    fetchGetUserByNameOrNumber,
    fetchGetUserByNameOrNumberReset
} from "../../../redux/insurance/insurance.actions";
import DropdownAlert from "react-native-dropdownalert";
import {readUser} from "../../../webservice/AuthApi";
import TextInput from "../../../components/TextInput";
import {createStructuredSelector} from "reselect";
import {
    selectActivatePaySubscription,
    selectAddDrug,
    selectCreateConsultation,
    selectGetAmountConsultation,
    selectGetDrugAppareil,
    selectGetNetworkAct,
    selectGetProviderClass,
    selectGetUserByIdQRCode,
    selectGetUserByIdQRCodeReducer,
    selectGetUserByNameOrNumber,
    selectGetUserByNameOrNumberReducer,
    selectSubscriptionList
} from "../../../redux/insurance/insurance.selector";
import StepHeader from "../../../components/StepHeaderComponent";
import Wizard from "react-native-wizard";
import Icon from "react-native-vector-icons/FontAwesome5";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Text from "../../../components/Text";
import SwitchSelector from "react-native-switch-selector";
import * as Animatable from "react-native-animatable";
import {Dropdown} from "react-native-material-dropdown";
import Modal from "react-native-modal";
import DateTimePicker from "@react-native-community/datetimepicker";
import QRCodeScanner from "react-native-qrcode-scanner";
import {RNCamera} from "react-native-camera";
import * as Utils from "../../../utils/UtilsFunction";
import {store} from "../../../redux/store";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import Fontisto from "react-native-vector-icons/Fontisto";

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

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

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: {
        alignItems: 'center',
        marginTop: 40,
        paddingBottom: 20,
        paddingLeft: 20,
        paddingRight: 20,
        flex: 1,
    },
    circle: {
        width: CIRCLE_SIZE,
        height: CIRCLE_SIZE,
        borderRadius: CIRCLE_SIZE / 2,
        position: 'absolute',
        top: '15%',
    },
    circleContainer: {
        alignItems: 'flex-end',
        right: -(CIRCLE_SIZE / 3),
        top: -(CIRCLE_SIZE / 1.5),
    },
    lineSeparator: {
        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: 15,
        justifyContent: 'space-between',
        borderBottomWidth: 1,
    },
    containModal: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    floatingButtonAdd: {
        backgroundColor: Color.accentColor,
        position: "absolute",
        width: 25,
        bottom: 0,
        zIndex: 1000,
        right: 20,
        top: 35,
        height: 25,
        borderRadius: 12.5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    contentSwitch: {
        width: responsiveWidth(40),
    },
    switch: {},
    choosePhotoBtn: {
        marginTop: 10,
        marginBottom: 10,
        width: "auto",
        height: "auto",
        padding: 5,
        alignItems: 'center',
        borderColor: Color.borderColor,
        marginRight: 10,
        elevation: 2,
    },
    checkbox: {
        alignSelf: "center",
        color: "white"
    },
    itemAmountPerMonth: {
        paddingLeft: 10,
        marginTop: 10,
        flexDirection: 'row',
    },
    dot: {
        width: 12,
        height: 12,
        borderRadius: 6
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    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%',
    }
});

const SaisirFeuilleSoinScreen = ({
                                     activatePaySubscription,
                                     fetchGetSubscriptionList,
                                     subscriptionList,
                                     fetchActivePaySubscription,
                                     fetchGetUserByIdQRCode,
                                     fetchGetUserByNameOrNumber,
                                     fetchGetDrugAppareil,
                                     fetchAddDrug,
                                     fetchGetProviderClass,
                                     fetchGetNetworkActs,
                                     fetchCreateConsultation,
                                     fetchGetAmountConsultation,
                                     getUserByNameOrNumber,
                                     getUserByIdQRCode,
                                     getDrugAppareil,
                                     getProviderClass,
                                     addDrug,
                                     createConsultation,
                                     getNetworkAct,
                                     getAmountConsultation,
                                     navigation
                                 }) => {

    const [datePrestation, setDatePrestation] = useState('' + moment(new Date()).format('YYYY-MM-DD HH:mm'));
    const [showDatePrestation, setShowDatePrestation] = useState(false);

    const [dateAccident, setDateAccident] = useState(null);
    const [isAccident, setIsAccident] = useState(false);
    const [showQRCodeScanner, setShowQRCodeScanner] = useState(false);
    const [showDateAccidentPicker, setShowDateAccidentPicker] = useState(false);

    const [wallet] = useState(store.getState().walletDetailReducer.result.response);

    const [isNumeroAssureSearch, setIsNumeroAssureSearch] = useState(false);
    const [isPhoneAssureSearch, setIsPhoneAssureSearch] = useState(false);

    const [dateDebutGrossesse, setDateDebutGrossesse] = useState(null);
    const [dateFinGrossesse, setDateFinGrossesse] = useState(null);
    const [isGrossesse, setIsGrossesse] = useState(false);
    const [showDateDebutGrossessePicker, setShowDateDebutGrossessePicker] = useState(false);
    const [showDateFinGrossessePicker, setShowDateFinGrossessePicker] = useState(false);
    const [careConditon, setCareCondition] = useState(null);

    const [user, setUser] = useState(null);
    const [assure, setAssure] = useState(null);
    const [beneficiary, setBeneficiary] = useState(null);
    const [medicament, setMedicament] = useState(null);
    const wizard = useRef();
    const [isFirstStep, setIsFirstStep] = useState(true);
    const [isLastStep, setIsLastStep] = useState(false);
    const [currentStep, setCurrentStep] = useState(1);
    const [modalPrestation, setModalPrestation] = useState(false);
    const [modalMedicament, setModalMedicament] = useState(false);
    const [modalAddMedicament, setModalAddMedicament] = useState(false);
    const [modalExamen, setModalExamen] = useState(false);
    const [modalListAssure, setModalListAssure] = useState(false);
    const [modalListMedicament, setModalListMedicament] = useState(false);

    const [networkAct, setNetworkAct] = useState(null);
    const [prestations, setPrestations] = useState([]);

    const [examens, setExamens] = useState([]);

    const [prescriptions, setPrescriptions] = useState([]);

    console.log("Prestations", prestations);
    console.log("examens", examens);
    console.log("prescriptions", prescriptions);


    const [statutPatientOption] = useState([
        {label: I18n.t('AYANT_DROITS'), value: "M"},
        {label: I18n.t('ASSURE'), value: "F"},
    ]);
    const [statutPatient, setStatutPatient] = useState(1);
    const [accident] = useState([
        {label: I18n.t('YES'), value: "YES"},
        {label: I18n.t('NO'), value: "NO"},
    ]);
    const [grossesse] = useState([
        {label: I18n.t('YES'), value: "YES"},
        {label: I18n.t('NO'), value: "NO"},
    ]);
    const [visiteDomicile] = useState([
        {label: I18n.t('YES'), value: "YES"},
        {label: I18n.t('NO'), value: "NO"},
    ]);

    const [isVisiteDomicile, setIsVisiteDomicile] = useState(false);

    const [conditionPriseEnChange] = useState([
        {label: I18n.t('AFFECTION_COURANTE'), value: "CURRENT_AFFECTION"},
        {label: I18n.t('AFFECTION_LONGUE'), value: "LONG_TERM_AFFECTION"},
        {
            label:
                I18n.t('EXONERE'), value: "EXONERATION"
        },
    ]);
    const [onPrescription] = useState([
        {label: I18n.t('COMPRESSED'), value: "COMPRESSED"},
        {label: I18n.t('SYRUP'), value: "SYRUP"},
        {label: I18n.t('SOLUTION'), value: "SOLUTION"},
        {label: I18n.t('SUPPOSITORY'), value: "SUPPOSITORY"},
        {label: I18n.t('DEVICE'), value: "DEVICE"},
    ]);

    const dispatch = useDispatch();
    let dropDownAlertRef: any = null;
    let classificationRef = null;
    let codeActeRef = null;
    let onPrescriptionRef = null;

    useEffect(() => {
        readUser().then((user) => {
            setFieldValue('agrement_praticien', user.code_membre);
            console.log("User", user);
            setUser(user)
        });
        dispatch(fetchGetSubscriptionListReset());
        dispatch(fetchActivePaySubscriptionReset());
        dispatch(fetchGetUserByNameOrNumberReset());
        dispatch(fetchGetUserByIdQRCodeReset());
        dispatch(fetchGetDrugAppareilReset());
        dispatch(fetchCreateConsultationReset());
        dispatch(fetchGetNetworkActsReset());
        dispatch(fetchGetProviderClassReset());
        dispatch(fetchAddDrugReset());

        fetchGetProviderClass(wallet.id_network);
        fetchGetNetworkActs(wallet.id_network, '');
    }, []);

    useEffect(() => {
        if (user !== null) {
            console.log("user", user);
        }
    }, [user]);

    useEffect(() => {
        console.log("getUserByNameOrNumber.result", getUserByNameOrNumber);
        if (getUserByNameOrNumber.result !== null) {
            if (getUserByNameOrNumber.result.response.length > 0) {
                setModalListAssure(true);
                //wizard.current.next();
            } else {
                dropDownAlertRef.alertWithType(
                    'warn',
                    I18n.t('EMPTY_LIST'),
                    I18n.t('NO_ASSURE_MATCH_SEARCH'),
                );
                dispatch(fetchGetUserByNameOrNumberReset());
            }

        }

        if (getUserByNameOrNumber.error) {
            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(getUserByNameOrNumber),
            );
            dispatch(fetchGetUserByNameOrNumberReset());
        }
    }, [getUserByNameOrNumber]);

    useEffect(() => {
        if (getDrugAppareil.result !== null) {
            if (getDrugAppareil.result.response.length > 0) {
                setModalListMedicament(true);
            } else {
                Alert.alert(
                    I18n.t("ERROR_LABEL"),
                    I18n.t('NO_DRUG_MATCH_YOU_SEARCH'),
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                setModalAddMedicament(true);
                                dispatch(fetchGetDrugAppareilReset());
                                dispatch(fetchAddDrugReset());
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }

        if (getDrugAppareil.error) {
            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(getDrugAppareil),
            );
            dispatch(fetchGetDrugAppareilReset());
        }
    }, [getDrugAppareil]);

    useEffect(() => {
        if (addDrug.result !== null) {
            setModalAddMedicament(false);
            setMedicament(addDrug.result.response);
        }

        if (addDrug.error) {
            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(addDrug),
            );
            dispatch(fetchAddDrugReset());
        }
    }, [addDrug]);

    useEffect(() => {
        if (createConsultation.result !== null) {
            Alert.alert(
                I18n.t("SUCCESS"),
                createConsultation.result.response,
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchCreateConsultationReset());
                            navigation.goBack();
                        }
                    }

                ],
                {cancelable: false}
            )
        }

        if (createConsultation.error) {
            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(createConsultation),
            );
            dispatch(fetchCreateConsultationReset());
        }
    }, [createConsultation]);

    const SaisirFeuilleSoinSchema = Yup.object().shape({
        numero_assure: Yup.string()
            .required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        password: Yup.string()
            .required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        practitioner_lastname: Yup.string()
            .required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        practitioner_firstname: Yup.string()
            .required(I18n.t('THIS_FIELD_IS_REQUIRED')),
    });

    const AddNewPrestation = Yup.object().shape({
        amount_prestation: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        code_acte: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        frais_deplacement: Yup.number(),
        date_prestation: Yup.date(),
        ticker_moderateur: Yup.number(),
    });

    const AddNewExamen = Yup.object().shape({
        examen_name: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        code_acte: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        examen_quantite: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED'))
    });

    const AddNewMedicament = Yup.object().shape({
        drug_name: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        drug_quantity: Yup.number().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        drug_posologie: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
    });

    const AddNewMedicamentToDB = Yup.object().shape({
        code: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        name: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED')),
        type: Yup.string().required(I18n.t('THIS_FIELD_IS_REQUIRED'))
    });

    const onChangeDatePrestation = (event, selectedDate) => {
        const currentDate = selectedDate || '' + moment(new Date()).format('YYYY-MM-DD');
        setShowDatePrestation(Platform.OS === 'ios');
        setDatePrestation(currentDate);
    };

    const renderDatePrestationPicker = () => {
        return (<DateTimePicker
                timeZoneOffsetInMinutes={0}
                is24Hour={true}
                value={new Date(datePrestation)}
                mode='date'
                display="spinner"
                onChange={onChangeDatePrestation}
            />
        );
    }

    const onChangeDateAccident = (event, selectedDate) => {
        const currentDate = selectedDate || new Date();
        setShowDateAccidentPicker(Platform.OS === 'ios');
        setDateAccident(moment(currentDate).format('YYYY-MM-DD'));
        setFieldValue('accident_date', moment(currentDate).format('YYYY-MM-DD'));
    };

    const renderDateAccidentPicker = () => {
        return (<DateTimePicker
                timeZoneOffsetInMinutes={0}
                is24Hour={true}
                value={new Date()}
                mode='date'
                display="spinner"
                onChange={onChangeDateAccident}
            />
        );
    }

    const onChangeDateDebutGrossesse = (event, selectedDate) => {
        const currentDate = selectedDate || new Date();
        setShowDateDebutGrossessePicker(Platform.OS === 'ios');
        setDateDebutGrossesse(moment(currentDate).format('YYYY-MM-DD'));
        setFieldValue('pregnancy_start_at', moment(currentDate).format('YYYY-MM-DD'));
    };

    const renderDateDebutGrossessePicker = () => {
        return (<DateTimePicker
                timeZoneOffsetInMinutes={0}
                is24Hour={true}
                value={new Date()}
                mode='date'
                display="spinner"
                onChange={onChangeDateDebutGrossesse}
            />
        );
    }

    const onChangeDateFinGrossesse = (event, selectedDate) => {
        const currentDate = selectedDate || new Date();
        setShowDateFinGrossessePicker(Platform.OS === 'ios');
        setDateFinGrossesse(moment(currentDate).format('YYYY-MM-DD'));
        setFieldValue('pregnancy_end_at', moment(currentDate).format('YYYY-MM-DD'));

    };

    const renderDateFinGrossessePicker = () => {
        return (<DateTimePicker
                timeZoneOffsetInMinutes={0}
                is24Hour={true}
                value={new Date()}
                mode='date'
                display="spinner"
                onChange={onChangeDateFinGrossesse}
            />
        );
    }

    const renderDialogQRCodeScanner = () => {

        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={showQRCodeScanner}>

                <Dialog.Title>{I18n.t('SCAN')}</Dialog.Title>

                <ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor, maxHeight: 300}]}>
                    <Text>
                        {I18n.t('BRING_YOUR_CAMERA_CLOSER_TO_SCAN_QR_CODE')}
                    </Text>
                    <QRCodeScanner
                        onRead={(result) => {
                            setShowQRCodeScanner(false);
                            console.log("result", result.data);
                        }}
                        flashMode={RNCamera.Constants.FlashMode.off}
                    />
                </ScrollView>

                <Dialog.Button bold={true} label={I18n.t('CLOSE')} onPress={() => {
                    setShowQRCodeScanner(false);
                }}/>
            </Dialog.Container>
        )
    }


    const renderAddNewPrestation = () => (
        <Formik validationSchema={AddNewPrestation}
                initialValues={{
                    amount_prestation: '',
                    frais_deplacement: '',
                    code_acte: ''
                }}
                onSubmit={(values) => {
                    if (values.code_acte === '')
                        codeActeRef.shake(200)
                    else {
                        setPrestations([{
                            act_id: values.code_acte,
                            amount: values.amount_prestation,
                            home_visit_fees: values.frais_deplacement
                        }, ...prestations]);
                        setModalPrestation(false);
                        Utils.displayToast(I18n.t('PRESTATION_SUCCESSFULLY_ADD'));
                    }

                }}>

            {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  setFieldValue,
                  setFieldTouched,
                  handleSubmit,
                  isSubmitting,
              }) => (
                <ScrollView style={{flex: 1}}>
                    <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
                        <Modal
                            isVisible={modalPrestation}
                            onSwipeComplete={() => {
                                setModalPrestation(false);
                            }}
                            swipeDirection={['down']}
                            style={styles.bottomModal}>
                            <View
                                style={[
                                    styles.contentFilterBottom,
                                    {backgroundColor: Color.containerBackgroundColor},
                                ]}>
                                <View style={styles.contentSwipeDown}>
                                    <View style={styles.lineSwipeDown}/>
                                </View>

                                <Text body2 style={{marginTop: 10}}>{I18n.t('ADD_PRESTATION')}</Text>

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('DATE')}
                                    value={'' + moment(datePrestation).format('YYYY-MM-DD HH:mm')}
                                    editable={false}
                                />

                                <Animatable.View ref={(comp) => {
                                    codeActeRef = comp
                                }}
                                                 style={{
                                                     width: responsiveWidth(90),
                                                     height: 60,
                                                     alignSelf: 'center',
                                                     borderRadius: 10,
                                                     paddingLeft: 20,
                                                     marginTop: 10,
                                                     paddingRight: 20,
                                                     backgroundColor: 'white'
                                                 }}>
                                    <Dropdown
                                        label={I18n.t('CODE_ACTE')}
                                        data={getNetworkAct.result !== null ? getNetworkAct.result?.response : []}
                                        useNativeDriver={true}
                                        onChangeText={(value, index, data) => {
                                            setFieldTouched('code_acte');
                                            setFieldValue('code_acte', value.id);
                                        }}
                                        valueExtractor={(value) => {
                                            return value
                                        }}
                                        labelExtractor={(value) => {
                                            return value.name
                                        }}
                                    />
                                </Animatable.View>

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('AMOUNT')}
                                    value={values.amount_prestation}
                                    onChangeText={handleChange('amount_prestation')}
                                    onBlur={handleBlur('amount_prestation')}
                                    success={touched.amount_prestation && !errors.amount_prestation}
                                    touched={touched.amount_prestation}
                                    error={errors.amount_prestation}
                                    onKeyPress={() => {
                                        fetchGetAmountConsultation({
                                            network_id: wallet.id_network,
                                            amount: values.amount_prestation,
                                            care_condition: careConditon
                                        });
                                    }}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('TICKET_MONDERATEUR')}
                                    editable={false}
                                    value={getAmountConsultation.result !== null ? getAmountConsultation.result.response.moderator_ticket : ''}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('AMOUNT_PER_INSURANCE')}
                                    editable={false}
                                    value={getAmountConsultation.result !== null ? getAmountConsultation.result.response.insurance_amount : ''}/>

                                <View style={{
                                    marginTop: 10,
                                    width: "100%",
                                    flexDirection: 'row',
                                    justifyContent: "space-between"
                                }}>
                                    <Text body2>{I18n.t('VISITE_DOMICILE')}</Text>
                                    <View style={styles.contentSwitch}>
                                        <SwitchSelector options={visiteDomicile}
                                                        initial={1}
                                                        buttonColor={Color.accentColor}
                                                        backgroundColor={Color.primaryDarkColor}
                                                        textColor='white'
                                                        bold={true}
                                                        hasPadding
                                                        height={32}
                                                        onPress={(value) => {
                                                            setIsVisiteDomicile(value === 'YES')
                                                        }}/>
                                    </View>
                                </View>

                                {isVisiteDomicile && (
                                    <TextInput
                                        style={{marginTop: 10}}
                                        placeholder={I18n.t('FRAIS_DEPLACEMENT')}
                                        value={values.frais_deplacement}
                                        onChangeText={handleChange('frais_deplacement')}
                                        onBlur={handleBlur('frais_deplacement')}
                                        success={touched.frais_deplacement && !errors.frais_deplacement}
                                        touched={touched.frais_deplacement}
                                        error={errors.frais_deplacement}
                                    />
                                )

                                }

                                <Button
                                    style={{marginTop: 20, marginBottom: 20}}
                                    full
                                    onPress={handleSubmit}>
                                    {I18n.t('SUBMIT_LABEL')}
                                </Button>
                            </View>
                        </Modal>
                    </View>
                </ScrollView>
            )}
        </Formik>
    );

    const renderAddNewMedicament = () => (
        <Formik validationSchema={AddNewMedicament}
                initialValues={{
                    drug_name: '',
                    drug_posologie: '',
                    drug_quantity: ''
                }}
                onSubmit={(values) => {
                    setPrescriptions([{
                        drug_or_device_id: medicament.id,
                        dosage: values.drug_posologie,
                        quantity: values.drug_quantity
                    }, ...prescriptions]);
                    setModalMedicament(false);
                    Utils.displayToast(I18n.t('PRESCRIPTIONS_SUCCESSFULLY_ADD'));
                }}>

            {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,

                  isSubmitting,
              }) => (
                <ScrollView style={{flex: 1}}>
                    <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
                        <Modal
                            isVisible={modalMedicament}
                            onSwipeComplete={() => {
                                setModalMedicament(false);
                            }}
                            swipeDirection={['down']}
                            style={styles.bottomModal}>
                            <View
                                style={[
                                    styles.contentFilterBottom,
                                    {backgroundColor: Color.containerBackgroundColor},
                                ]}>
                                <View style={styles.contentSwipeDown}>
                                    <View style={styles.lineSwipeDown}/>
                                </View>

                                <Text body2 style={{marginTop: 10}}>{I18n.t('AJOUTER_MEDICAMENT')}</Text>

                                <View style={{flexDirection: 'row'}}>
                                    <TextInput
                                        style={{marginTop: 10, width: "90%"}}
                                        placeholder={I18n.t('NAME')}
                                        value={medicament !== null ? medicament.name : values.drug_name}
                                        onChangeText={handleChange('drug_name')}
                                        onBlur={handleBlur('drug_name')}
                                        success={touched.drug_name && !errors.drug_name}
                                        touched={touched.drug_name}
                                        error={errors.drug_name}
                                        editable={medicament === null}
                                    />
                                    <TouchableOpacity
                                        style={[
                                            styles.iconNavigationButton,
                                            {
                                                backgroundColor:
                                                Color.primaryColor,
                                                borderColor:
                                                Color.primaryColor,
                                                marginTop: 10,
                                                width: 40,
                                                height: 40,
                                            },
                                        ]}
                                        onPress={e => {
                                            fetchGetDrugAppareil(wallet.id_network, values.drug_name);
                                        }}>
                                        {(getDrugAppareil.loading) ?
                                            <ActivityIndicator
                                                size="small"
                                                color="#fff"
                                            />
                                            : <FontAwesome
                                                name="search"
                                                size={24}
                                                color={Color.whiteColor}
                                            />}

                                    </TouchableOpacity>
                                </View>

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('POSOLOGIE')}
                                    value={values.drug_posologie}
                                    onChangeText={handleChange('drug_posologie')}
                                    onBlur={handleBlur('drug_posologie')}
                                    success={touched.drug_posologie && !errors.drug_posologie}
                                    touched={touched.drug_posologie}
                                    error={errors.drug_posologie}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('QUANTITE')}
                                    value={values.drug_quantity}
                                    onChangeText={handleChange('drug_quantity')}
                                    onBlur={handleBlur('drug_quantity')}
                                    success={touched.drug_quantity && !errors.drug_quantity}
                                    touched={touched.drug_quantity}
                                    error={errors.drug_quantity}
                                    keyboardType='numeric'
                                />

                                <Button
                                    style={{marginTop: 20, marginBottom: 20}}
                                    full
                                    onPress={handleSubmit}>
                                    {I18n.t('SUBMIT_LABEL')}
                                </Button>
                            </View>
                        </Modal>
                    </View>
                </ScrollView>
            )}
        </Formik>
    );

    const renderAddNewMedicamentToDB = () => (
        <Formik validationSchema={AddNewMedicamentToDB}
                initialValues={{
                    code: '',
                    name: '',
                    type: '',
                    on_prescription: false
                }}
                onSubmit={(values) => {
                    setMedicament(null);
                    fetchAddDrug({
                        network_id: wallet.id_network,
                        code: values.code,
                        name: values.name,
                        type: values.type,
                        on_prescription: values.on_prescription
                    })
                }}>

            {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  setFieldValue,

                  isSubmitting,
              }) => (
                <ScrollView style={{flex: 1}}>
                    <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
                        <Modal
                            isVisible={modalAddMedicament}
                            onSwipeComplete={() => {
                                setModalAddMedicament(false);
                            }}
                            swipeDirection={['down']}
                            style={styles.bottomModal}>
                            <View
                                style={[
                                    styles.contentFilterBottom,
                                    {backgroundColor: Color.containerBackgroundColor},
                                ]}>
                                <View style={styles.contentSwipeDown}>
                                    <View style={styles.lineSwipeDown}/>
                                </View>

                                <Text body2 style={{marginTop: 10}}>{I18n.t('AJOUTER_NOUVEAU_MEDICAMENT')}</Text>
                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder='Code'
                                    value={values.code}
                                    onChangeText={handleChange('code')}
                                    onBlur={handleBlur('code')}
                                    success={touched.code && !errors.code}
                                    touched={touched.code}
                                    error={errors.code}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('NAME')}
                                    value={values.name}
                                    onChangeText={handleChange('name')}
                                    onBlur={handleBlur('name')}
                                    success={touched.name && !errors.name}
                                    touched={touched.name}
                                    error={errors.name}
                                />


                                <Animatable.View ref={(comp) => {
                                    onPrescriptionRef = comp
                                }}
                                                 style={{
                                                     width: responsiveWidth(90),
                                                     height: 60,
                                                     alignSelf: 'center',
                                                     borderRadius: 10,
                                                     paddingLeft: 20,
                                                     marginTop: 10,
                                                     paddingRight: 20,
                                                     backgroundColor: 'white'
                                                 }}>
                                    <Dropdown
                                        label='Type'
                                        data={onPrescription}
                                        useNativeDriver={true}
                                        onChangeText={(value, index, data) => {
                                            setFieldValue('type', value.value);
                                        }}
                                        valueExtractor={(value) => {
                                            return value
                                        }}
                                        labelExtractor={(value) => {
                                            return value.label
                                        }}
                                    />
                                </Animatable.View>

                                <View style={{
                                    marginTop: 10,
                                    flexDirection: 'row',
                                    justifyContent: "space-between"
                                }}>
                                    <Text body2>{I18n.t('SOUS_ORDONNANCE')}</Text>
                                    <View style={{width: responsiveWidth(60)}}>
                                        <SwitchSelector options={grossesse}
                                                        initial={1}
                                                        buttonColor={Color.accentColor}
                                                        backgroundColor={Color.primaryDarkColor}
                                                        textColor='white'
                                                        bold={true}
                                                        hasPadding
                                                        height={32}
                                                        onPress={(value) => {
                                                            setFieldValue('on_prescription', value === 'YES');
                                                            console.log("On Prescription", value);
                                                            //setGender(value);
                                                        }}/>
                                    </View>
                                </View>

                                <Button
                                    style={{marginTop: 20, marginBottom: 20}}
                                    full
                                    loading={addDrug.loading}
                                    onPress={handleSubmit}>
                                    {I18n.t('SUBMIT_LABEL')}
                                </Button>
                            </View>
                        </Modal>
                    </View>
                </ScrollView>
            )}
        </Formik>
    );

    const renderAddNewExamen = () => (
        <Formik validationSchema={AddNewExamen}
                initialValues={{
                    examen_name: '',
                    examen_quantite: '',
                    code_acte: ''
                }}
                onSubmit={(values) => {
                    console.log("Value", values);
                    setExamens([{
                        act_id: values.code_acte,
                        description: values.examen_name,
                        quantity: values.examen_quantite
                    }, ...examens]);
                    setModalExamen(false);
                    Utils.displayToast(I18n.t('EXAMENS_SUCCESSFULLY_ADD'));
                }}>

            {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  setFieldValue,
                  setFieldTouched,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
              }) => (
                <ScrollView style={{flex: 1}}>
                    <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
                        <Modal
                            isVisible={modalExamen}
                            onSwipeComplete={() => {
                                setModalExamen(false);
                            }}
                            swipeDirection={['down']}
                            style={styles.bottomModal}>
                            <View
                                style={[
                                    styles.contentFilterBottom,
                                    {backgroundColor: Color.containerBackgroundColor},
                                ]}>
                                <View style={styles.contentSwipeDown}>
                                    <View style={styles.lineSwipeDown}/>
                                </View>

                                <Text body2 style={{marginTop: 10}}>{I18n.t('AJOUTER_EXAMEN')}</Text>

                                <Animatable.View ref={(comp) => {
                                    codeActeRef = comp
                                }}
                                                 style={{
                                                     width: responsiveWidth(90),
                                                     height: 60,
                                                     alignSelf: 'center',
                                                     borderRadius: 10,
                                                     paddingLeft: 20,
                                                     marginTop: 10,
                                                     paddingRight: 20,
                                                     backgroundColor: 'white'
                                                 }}>
                                    <Dropdown
                                        label={I18n.t('CODE_ACTE')}
                                        data={getNetworkAct.result !== null ? getNetworkAct.result?.response : []}
                                        useNativeDriver={true}
                                        onChangeText={(value, index, data) => {
                                            console.log("Value", value);
                                            setFieldTouched('code_acte');
                                            setFieldValue('code_acte', value.id);
                                        }}
                                        valueExtractor={(value) => {
                                            return value
                                        }}
                                        labelExtractor={(value) => {
                                            return value.name
                                        }}
                                    />
                                </Animatable.View>

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('NAME')}
                                    value={values.examen_name}
                                    onChangeText={handleChange('examen_name')}
                                    onBlur={handleBlur('examen_name')}
                                    success={touched.examen_name && !errors.examen_name}
                                    touched={touched.examen_name}
                                    error={errors.examen_name}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('QUANTITE')}
                                    value={values.examen_quantite}
                                    onChangeText={handleChange('examen_quantite')}
                                    onBlur={handleBlur('examen_quantite')}
                                    success={touched.examen_quantite && !errors.examen_quantite}
                                    touched={touched.examen_quantite}
                                    error={errors.examen_quantite}
                                    keyboardType='numeric'
                                />

                                <Button
                                    style={{marginTop: 20, marginBottom: 20}}
                                    full
                                    onPress={() => {
                                        console.log("errors", errors);
                                        console.log("values", values);
                                        handleSubmit();
                                    }}>
                                    {I18n.t('SUBMIT_LABEL')}
                                </Button>
                            </View>
                        </Modal>
                    </View>
                </ScrollView>
            )}
        </Formik>
    );

    const renderListAssure = () => (
        <ScrollView style={{flex: 1}}>
            <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
                <Modal
                    isVisible={modalListAssure}
                    onSwipeComplete={() => {
                        setModalListAssure(false);
                    }}
                    swipeDirection={['down']}
                    style={styles.bottomModal}>
                    <View
                        style={[
                            styles.contentFilterBottom,
                            {backgroundColor: Color.containerBackgroundColor},
                        ]}>
                        <View style={styles.contentSwipeDown}>
                            <View style={styles.lineSwipeDown}/>
                        </View>

                        <Text body2 style={{marginTop: 10}}>{I18n.t('LIST_ASSURE')}</Text>

                        <FlatList data={getUserByNameOrNumber.result?.response}
                                  extraData={getUserByNameOrNumber.result?.response}
                                  keyExtractor={(item, index) => index}
                                  ListEmptyComponent={<Text body2>{I18n.t('NO_ASSURE_MATCH_SEARCH')}</Text>}
                                  renderItem={({item, index}) => {
                                      return (
                                          <View style={{
                                              paddingVertical: 15,
                                              alignItems: 'flex-start',
                                          }}>
                                              <TouchableOpacity
                                                  style={[
                                                      styles.contentActionModalBottom,
                                                      {borderBottomColor: Color.borderColor, width: "100%"},
                                                  ]}
                                                  key={item.id}
                                                  onPress={() => {
                                                      if (item.state !== 'PAID') {
                                                          Alert.alert(I18n.t('ERROR_LABEL'), I18n.t('ASSURE_NON_EN_REGLE'),
                                                              [{
                                                                  text: I18n.t('OK'), onPress: () => {
                                                                  }
                                                              }]);
                                                      } else {
                                                          setAssure(item);
                                                          setBeneficiary(null);
                                                          setStatutPatient(1);
                                                          setModalListAssure(false);
                                                          setFieldValue(
                                                              'lastname_patient',
                                                              item.user.lastname,
                                                          );
                                                          setFieldValue(
                                                              'firstname_patient',
                                                              item.user.firstname,
                                                          );
                                                          dispatch(fetchGetUserByNameOrNumberReset());
                                                          wizard.current.next();
                                                      }
                                                  }}>
                                                  <Text body2 semibold>
                                                      {`${item.user.firstname} ${item.user.lastname}`}
                                                  </Text>
                                              </TouchableOpacity>
                                              {item.beneficiaries.map((beneficiary) => (
                                                  <TouchableOpacity style={styles.beneficiarySubSection}
                                                                    onPress={() => {
                                                                        setAssure(item);
                                                                        setBeneficiary(beneficiary);
                                                                        setStatutPatient(0);
                                                                        setModalListAssure(false);
                                                                        setFieldValue(
                                                                            'lastname_patient',
                                                                            beneficiary.lastname,
                                                                        );
                                                                        setFieldValue(
                                                                            'firstname_patient',
                                                                            beneficiary.firstname,
                                                                        );
                                                                        dispatch(fetchGetUserByNameOrNumberReset());
                                                                        wizard.current.next();
                                                                    }}>
                                                      <View style={{width: 10}}/>
                                                      <View style={{paddingHorizontal: 10, alignItems: 'flex-start'}}>
                                                          <Text subhead semibold>
                                                              {`${beneficiary.firstname} ${beneficiary.lastname} (${I18n.t('AYANT_DROITS')})`}
                                                          </Text>
                                                      </View>
                                                  </TouchableOpacity>
                                              ))}
                                          </View>
                                      )
                                  }}/>

                        <Button
                            full
                            style={{marginTop: 10, marginBottom: 20}}
                            onPress={() => setModalListAssure(false)}>
                            {I18n.t('OK')}
                        </Button>

                    </View>
                </Modal>
            </View>
        </ScrollView>
    )

    const renderListMedicament = () => (
        <ScrollView style={{flex: 1}}>
            <View style={[styles.containModal, {backgroundColor: Color.containerBackgroundColor}]}>
                <Modal
                    isVisible={modalListMedicament}
                    onSwipeComplete={() => {
                        setModalListMedicament(false);
                    }}
                    swipeDirection={['down']}
                    style={styles.bottomModal}>
                    <View
                        style={[
                            styles.contentFilterBottom,
                            {backgroundColor: Color.containerBackgroundColor},
                        ]}>
                        <View style={styles.contentSwipeDown}>
                            <View style={styles.lineSwipeDown}/>
                        </View>

                        <Text body2 style={{marginTop: 10}}>{I18n.t('LISTE_MEDICAMENT')}</Text>

                        <FlatList data={getDrugAppareil.result?.response}
                                  extraData={getDrugAppareil.result?.response}
                                  keyExtractor={(item, index) => index}
                                  renderItem={({item, index}) => {
                                      return (
                                          <View style={{
                                              paddingVertical: 15,
                                              alignItems: 'flex-start',
                                          }}>
                                              <TouchableOpacity
                                                  style={[
                                                      styles.contentActionModalBottom,
                                                      {borderBottomColor: Color.borderColor, width: "100%"},
                                                  ]}
                                                  key={item.id}
                                                  onPress={() => {
                                                      setMedicament(item);
                                                      setModalListMedicament(false);
                                                  }}>
                                                  <Text body2 semibold>
                                                      {`${item.name} | ${item.type}`}
                                                  </Text>
                                              </TouchableOpacity>
                                          </View>
                                      )
                                  }}/>

                        <Button
                            full
                            style={{marginTop: 10, marginBottom: 20}}
                            onPress={() => setModalListMedicament(false)}>
                            {I18n.t('OK')}
                        </Button>

                    </View>
                </Modal>
            </View>
        </ScrollView>
    )

    const {
        handleChange,
        handleSubmit,
        handleBlur,
        values,
        errors,
        touched,
        setFieldValue,
        setFieldTouched,
        isValid,
    } = useFormik({
        validationSchema: SaisirFeuilleSoinSchema,
        initialValues: {
            numero_assure: '',
            password: '',
            firstname_patient: '',
            lastname_patient: '',
            practitioner_firstname: '',
            practitioner_lastname: '',
            agrement_praticien: user?.code_membre,
            accident_date: null,
            pregnancy_start_at: null,
            pregnancy_end_at: null,
        },
        onSubmit: values => {

            if (prestations.length === 0) {
                dropDownAlertRef.alertWithType(
                    'error',
                    I18n.t('ERROR_LABEL'),
                    I18n.t('YOU_MUST_ADD_AT_LEAST_ONE_PRESTATION'),
                );
            } else {
                fetchCreateConsultation({
                    insured_id: assure.insured_id,
                    network_agent_id: wallet.network_agent_id,
                    password: values.password,
                    beneficiary_id: beneficiary !== null ? beneficiary.id : null,
                    practitioner_lastname: values.practitioner_lastname,
                    practitioner_firstname: values.practitioner_firstname,
                    practitioner_provider_class_id: values.practitioner_provider_class_id,
                    care_condition: values.care_condition,
                    accident_date: values.accident_date,
                    pregnancy_start_at: values.pregnancy_start_at,
                    pregnancy_end_at: values.pregnancy_end_at,
                    performances: prestations,
                    prescriptions: prescriptions,
                    exams: examens
                })
            }
        },
    });

    const onNext = () => {
        console.log("currentStep", currentStep);
        switch (currentStep) {
            case 0:
                console.log("values", values);
                if (values.numero_assure !== '') {
                    dispatch(fetchGetUserByNameOrNumberReset());
                    if (isNumeroAssureSearch)
                        fetchGetUserByNameOrNumber(wallet.id_network, `&insured_id=${values.numero_assure}`);
                    else if (isPhoneAssureSearch)
                        fetchGetUserByNameOrNumber(wallet.id_network, `&phone=${values.numero_assure}`);
                    else
                        fetchGetUserByNameOrNumber(wallet.id_network, `&name=${values.numero_assure}`)
                    console.log("errors", errors);
                }
                return false;
                break;

            default:
                return true;
        }
    };

    const stepList = [
        {
            title: I18n.t('ASSURE'),
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={isNumeroAssureSearch ? I18n.t('NUMERO_ASSURE') : isPhoneAssureSearch ? I18n.t('PHONE_NUMBER') : I18n.t('NOM_ASSURE')}
                        value={values.numero_assure}
                        keyboardType={isPhoneAssureSearch ? 'numeric' : 'default'}
                        onChangeText={handleChange('numero_assure')}
                        onBlur={handleBlur('numero_assure')}
                        success={touched.numero_assure && !errors.numero_assure}
                        touched={touched.numero_assure}
                        error={errors.numero_assure}
                        icon={
                            <FontAwesome
                                style={{zIndex: 10}}
                                name={isNumeroAssureSearch ? 'lock' : isPhoneAssureSearch ? 'phone' : 'user'}
                                size={20}
                            />
                        }
                    />
                    <View style={{
                        flexDirection: 'row',
                        position: 'absolute',
                        top: 22,
                        right: 50,
                        justifyContent: 'space-between',
                        width: 50
                    }}>
                        <Icon
                            style={{paddingRight: 5}}
                            name='lock'
                            size={20}
                            color={Color.primaryColor}
                            onPress={() => {
                                setIsNumeroAssureSearch(true);
                                setIsPhoneAssureSearch(false);
                            }}
                        />
                        <Icon
                            style={{paddingRight: 5}}
                            name='phone'
                            size={20}
                            color={Color.primaryColor}
                            onPress={() => {
                                setIsNumeroAssureSearch(false);
                                setIsPhoneAssureSearch(true);
                            }}
                        />
                        <Icon
                            style={{paddingRight: 5}}
                            name='user'
                            size={20}
                            color={Color.primaryColor}
                            onPress={() => {
                                setIsNumeroAssureSearch(false);
                                setIsPhoneAssureSearch(false);
                            }}
                        />
                        <Icon
                            style={{paddingRight: 5}}
                            name="qrcode"
                            size={20}
                            color={Color.primaryColor}
                            onPress={() => {
                                setShowQRCodeScanner(true);
                            }}
                        />
                    </View>
                </View>
            ),
        },
        {
            title: I18n.t('PATIENT'),
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('NOM_CLIENT')}
                        value={values.lastname_patient}
                        onChangeText={handleChange('lastname_patient')}
                        onBlur={handleBlur('lastname_patient')}
                        success={touched.lastname_patient && !errors.lastname_patient}
                        touched={touched.lastname_patient}
                        editable={false}
                        error={errors.lastname_patient}
                    />

                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('PRENOM_CLIENT')}
                        value={values.firstname_patient}
                        editable={false}
                        onChangeText={handleChange('firstname_patient')}
                        onBlur={handleBlur('firstname_patient')}
                        success={touched.firstname_patient && !errors.firstname_patient}
                        touched={touched.firstname_patient}
                        error={errors.firstname_patient}
                    />

                    <View style={{
                        marginTop: 10,
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <Text body2>{I18n.t('SITUATION')}</Text>
                        <View style={{width: responsiveWidth(60)}}>
                            <SwitchSelector options={statutPatientOption}
                                            disabled={true}
                                            value={statutPatient}
                                            initial={statutPatient}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                                //setGender(value);
                                            }}/>
                        </View>
                    </View>
                </View>
            ),
        },
        {
            title: I18n.t('PRATICIEN'),
            content: (
                <View>
                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('CODE_AGREMENT')}
                        value={values.agrement_praticien}
                        editable={false}
                    />

                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('NOM_PRATICIEN')}
                        value={values.practitioner_lastname}
                        onChangeText={handleChange('practitioner_lastname')}
                        onBlur={handleBlur('practitioner_lastname')}
                        success={touched.practitioner_lastname && !errors.practitioner_lastname}
                        touched={touched.practitioner_lastname}
                        error={errors.practitioner_lastname}
                    />

                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('PRENOM_PRATICIEN')}
                        value={values.practitioner_firstname}
                        onChangeText={handleChange('practitioner_firstname')}
                        onBlur={handleBlur('practitioner_firstname')}
                        success={touched.practitioner_firstname && !errors.practitioner_firstname}
                        touched={touched.practitioner_firstname}
                        error={errors.practitioner_firstname}
                    />

                    <Animatable.View ref={(comp) => {
                        classificationRef = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         marginTop: 10,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('CLASSIFICATION')}
                            data={getProviderClass.result !== null ? getProviderClass.result?.response : []}
                            useNativeDriver={true}
                            onChangeText={(value, index, data) => {
                                setFieldTouched('practitioner_provider_class_id');
                                setFieldValue('practitioner_provider_class_id', value.id);
                                console.log("Value", value);
                            }}
                            valueExtractor={(value) => {
                                return value
                            }}
                            labelExtractor={(value) => {
                                return value.name
                            }}
                        />
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        classificationRef = comp
                    }}
                                     style={{
                                         width: responsiveWidth(90),
                                         height: 60,
                                         alignSelf: 'center',
                                         borderRadius: 10,
                                         paddingLeft: 20,
                                         marginTop: 10,
                                         paddingRight: 20,
                                         backgroundColor: 'white'
                                     }}>
                        <Dropdown
                            label={I18n.t('CONDITION_PRISE_CHARGE')}
                            data={conditionPriseEnChange}
                            useNativeDriver={true}
                            onChangeText={(value, index, data) => {
                                console.log("Value", value);
                                setCareCondition(value);
                                setFieldTouched('care_condition');
                                setFieldValue('care_condition', value);
                            }}
                            valueExtractor={(value) => {
                                return value.value
                            }}
                            labelExtractor={(value) => {
                                return value.label
                            }}
                        />
                    </Animatable.View>


                    <View style={{
                        marginTop: 10,
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <Text body2>{I18n.t('ACCIDENT')}</Text>
                        <View style={{width: responsiveWidth(40)}}>
                            <SwitchSelector options={accident}
                                            initial={1}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                                console.log(value);
                                                setIsAccident(value === 'YES');
                                            }}/>
                        </View>
                    </View>

                    {
                        isAccident && (
                            <TextInput
                                style={{marginTop: 10}}
                                placeholder={I18n.t('DATE_ACCIDENT')}
                                value={dateAccident !== null ? dateAccident : ''}
                                onChangeText={handleChange('date_accident')}
                                onBlur={handleBlur('date_accident')}
                                onFocus={() => {
                                    Keyboard.dismiss();
                                    //setDateAccident('' + moment(new Date()).format('YYYY-MM-DD'));
                                    setShowDateAccidentPicker(true);
                                }}
                                success={touched.date_accident && !errors.date_accident}
                                touched={touched.date_accident}
                                error={errors.date_accident}
                            />
                        )
                    }

                    <View style={{
                        marginTop: 10,
                        flexDirection: 'row',
                        justifyContent: "space-between"
                    }}>
                        <Text body2>{I18n.t('GROSSESSE')}</Text>
                        <View style={styles.contentSwitch}>
                            <SwitchSelector options={grossesse}
                                            initial={1}
                                            buttonColor={Color.accentColor}
                                            backgroundColor={Color.primaryDarkColor}
                                            textColor='white'
                                            bold={true}
                                            hasPadding
                                            height={32}
                                            onPress={(value) => {
                                                setIsGrossesse(value === 'YES');
                                            }}/>
                        </View>
                    </View>

                    {
                        isGrossesse && (
                            <>
                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('DATE_DEBUT_GROSSESSE')}
                                    value={dateDebutGrossesse !== null ? dateDebutGrossesse : ''}
                                    onChangeText={handleChange('date_debut_grossesse')}
                                    onBlur={handleBlur('date_debut_grossesse')}
                                    onFocus={() => {
                                        Keyboard.dismiss();
                                        //setDateAccident('' + moment(new Date()).format('YYYY-MM-DD'));
                                        setShowDateDebutGrossessePicker(true);
                                    }}
                                    success={touched.date_debut_grossesse && !errors.date_debut_grossesse}
                                    touched={touched.date_debut_grossesse}
                                    error={errors.date_debut_grossesse}
                                />

                                <TextInput
                                    style={{marginTop: 10}}
                                    placeholder={I18n.t('DATE_FIN_GROSSESSE')}
                                    value={dateFinGrossesse !== null ? dateFinGrossesse : ''}
                                    onChangeText={handleChange('date_fin_grossesse')}
                                    onBlur={handleBlur('date_fin_grossesse')}
                                    onFocus={() => {
                                        Keyboard.dismiss();
                                        //setDateAccident('' + moment(new Date()).format('YYYY-MM-DD'));
                                        setShowDateFinGrossessePicker(true);
                                    }}
                                    success={touched.date_fin_grossesse && !errors.date_fin_grossesse}
                                    touched={touched.date_fin_grossesse}
                                    error={errors.date_fin_grossesse}
                                />
                            </>
                        )
                    }

                    <TextInput
                        style={{marginTop: 10}}
                        placeholder={I18n.t('PASSWORD')}
                        value={values.password}
                        onChangeText={handleChange('password')}
                        onBlur={handleBlur('password')}
                        success={touched.password && !errors.password}
                        touched={touched.password}
                        error={errors.password}
                        secureTextEntry
                    />

                    <View
                        style={{
                            marginTop: 25,
                        }}>
                        <View style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'space-between',
                        }}>

                            <TouchableOpacity
                                style={[
                                    styles.iconNavigationButton,
                                    {
                                        borderRadius: 5,
                                        width: 100,
                                        height: 30,
                                        flexDirection: "row",
                                        backgroundColor:
                                        Color.primaryColor,
                                        borderColor:
                                        Color.primaryColor,
                                    },
                                ]}
                                onPress={e => {
                                    dispatch(fetchGetAmountConsultationReset());
                                    setIsVisiteDomicile(false);
                                    if (careConditon === null) {
                                        dropDownAlertRef.alertWithType(
                                            'warn',
                                            I18n.t('ERROR_LABEL'),
                                            I18n.t('PLEASE_SELECT_CONDITON_PRISE_CHARGE_FIRST'),
                                        );
                                    } else setModalPrestation(true);
                                }}>
                                <Text whiteColor>{I18n.t('PRESTATION')}</Text>
                                <MaterialCommunityIcons
                                    name="medical-bag"
                                    size={20}
                                    color={Color.whiteColor}
                                />
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[
                                    styles.iconNavigationButton,
                                    {
                                        borderRadius: 5,
                                        width: 100,
                                        height: 30,
                                        flexDirection: "row",
                                        backgroundColor:
                                        Color.primaryColor,
                                        borderColor:
                                        Color.primaryColor,
                                    },
                                ]}
                                onPress={e => {
                                    setModalExamen(true);
                                }}>
                                <Text whiteColor>{I18n.t('EXAMEN')}</Text>
                                <FontAwesome5
                                    name="file-medical"
                                    size={20}
                                    color={Color.whiteColor}
                                />
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[
                                    styles.iconNavigationButton,
                                    {
                                        borderRadius: 5,
                                        width: 110,
                                        height: 30,
                                        flexDirection: "row",
                                        backgroundColor:
                                        Color.primaryColor,
                                        borderColor:
                                        Color.primaryColor,
                                    },
                                ]}
                                onPress={e => {
                                    setModalMedicament(true);
                                    setMedicament(null);
                                }}>
                                <Text whiteColor>{I18n.t('MEDICAMENT')}</Text>
                                <Fontisto
                                    name="drug-pack"
                                    size={20}
                                    color={Color.whiteColor}
                                />
                            </TouchableOpacity>

                        </View>
                    </View>

                </View>
            ),
        },
    ];

    return (
        <ScreenComponent>
            <DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
            <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 === 2 ? (
                                <Button
                                    loading={createConsultation.loading}
                                    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>
                        {modalPrestation && renderAddNewPrestation()}
                        {modalMedicament && renderAddNewMedicament()}
                        {modalExamen && renderAddNewExamen()}
                        {showDatePrestation && renderDatePrestationPicker()}
                        {showDateAccidentPicker && renderDateAccidentPicker()}
                        {showDateDebutGrossessePicker && renderDateDebutGrossessePicker()}
                        {showDateFinGrossessePicker && renderDateFinGrossessePicker()}
                        {showQRCodeScanner && renderDialogQRCodeScanner()}
                        {modalListAssure && renderListAssure()}
                        {modalListMedicament && renderListMedicament()}
                        {modalAddMedicament && renderAddNewMedicamentToDB()}
                    </View>
                </ScrollView>
            </KeyboardAvoidingView>
        </ScreenComponent>
    );
};

const mapStateToProps = createStructuredSelector({
    subscriptionList: selectSubscriptionList,
    activatePaySubscription: selectActivatePaySubscription,
    getUserByNameOrNumber: selectGetUserByNameOrNumber,
    getUserByIdQRCode: selectGetUserByIdQRCode,
    getDrugAppareil: selectGetDrugAppareil,
    addDrug: selectAddDrug,
    getProviderClass: selectGetProviderClass,
    createConsultation: selectCreateConsultation,
    getNetworkAct: selectGetNetworkAct,
    getAmountConsultation: selectGetAmountConsultation
});

export default connect(mapStateToProps, {
    fetchActivePaySubscription,
    fetchGetSubscriptionList,
    fetchGetUserByIdQRCode,
    fetchGetUserByNameOrNumber,
    fetchGetDrugAppareil,
    fetchAddDrug,
    fetchGetProviderClass,
    fetchGetNetworkActs,
    fetchCreateConsultation,
    fetchGetAmountConsultation
})(
    SaisirFeuilleSoinScreen,
);