ilink-world/screens/wallet/user/DemandeAutorisationSoinScreen.js

/**
 * Project iLinkWorld
 * File DemandeAutorisationSoinScreen
 * Path screens/wallet/user
 * Created by BRICE ZELE
 * Date: 01/02/2022
 */
import React, {useEffect, 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,
    fetchAcceptRejectConsultationReset,
    fetchActivePaySubscription,
    fetchDeleteBeneficiaryReset,
    fetchDemaneAutorisationSoin,
    fetchDemaneAutorisationSoinReset,
    fetchGetConsultation,
    fetchGetConsultationReset,
    fetchGetListInsurance,
    fetchGetListInsuranceReset,
    fetchGetListInsuranceWithBeneficiaries,
    fetchGetNetworkActs
} from "../../../redux/insurance/insurance.actions";
import DropdownAlert from "react-native-dropdownalert";
import {createStructuredSelector} from "reselect";
import {
    selectAcceptRefuseConsultation,
    selectActivatePaySubscription, selectDemandeAutorisationSoin,
    selectGetConsultation, selectGetNetworkAct,
    selectInsuranceList,
    selectSubscriptionList
} from "../../../redux/insurance/insurance.selector";
import {readUser} from "../../../webservice/AuthApi";
import Text from '../../../components/Text';
import * as Utils from "../../../utils/UtilsFunction";
import {displayToast, uppercaseFirstLetter} from "../../../utils/UtilsFunction";
import Dialog from "react-native-dialog";
import {Typography} from "../../../config/typography";
import {store} from "../../../redux/store";
import {Formik} from "formik";
import * as Animatable from "react-native-animatable";
import {responsiveWidth} from "react-native-responsive-dimensions";
import {Dropdown} from "react-native-material-dropdown";
import PasswordInput from "../../../components/PasswordInput";
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";


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

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

const DemandeAutorisationSoinScreen = ({
                                           navigation,
                                           fetchGetNetworkActs,
                                           fetchAcceptRejectConsultation,
                                           fetchGetListInsuranceWithBeneficiaries,
                                           fetchDemaneAutorisationSoin,
                                           getConsultation,
                                           insuranceList,
                                           getNetworkAct,
                                           demandeAutorisationSoin
                                       }) => {
    const dispatch = useDispatch();
    const [user, setUser] = useState(null);
    const [displayModalHistory, setDisplayModalHistory] = useState(false);
    const [historyItemDetail, setHistoryItemDetail] = useState({});
    const [wallet] = useState(store.getState().walletDetailReducer.result.response);
    const [insurances, setInsurances] = useState([]);
    const [beneficiaries, setBeneficiaries] = useState([]);
    const [beneficiaryId, setBeneficiaryId] = useState(null);
    const [insurance, setInsurance] = useState(null);

    let insurancesRef = null;
    let codeActeRef = null;
    const [modalListAssure, setModalListAssure] = useState(false);

    let dropDownAlertRef: any = null;

    const RegisterSchema = Yup.object().shape({
        password: Yup.string()
            .required(I18n.t('THIS_FIELD_IS_REQUIRED'))
    });

    useEffect(() => {
        dispatch(fetchGetConsultationReset());
        dispatch(fetchGetListInsuranceReset());
        dispatch(fetchAcceptRejectConsultationReset());
        readUser().then((user) => {
            setUser(user);
            console.log("User", user);
            fetchGetListInsuranceWithBeneficiaries(`?user_id=${user.id}`);
            //fetchGetConsultation(user.id, 'ACCEPTED', '');
        });
        //fetchGetNetworkActs(wallet.idNetwork, '', '&authorization_type=PRIOR');
    }, []);

    useEffect(() => {
        if (getConsultation.error) {
            Alert.alert(
                I18n.t("ERROR_LABLE"),
                Utils.getErrorMsg(getConsultation),
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchGetConsultationReset());
                        }
                    }
                ],
                { cancelable: false }
            );
/*            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(getConsultation),
            );
            dispatch(fetchGetConsultationReset());*/
        }
    }, [getConsultation]);

    useEffect(() => {
        if (insuranceList.result !== null) {
            let insuranceListTemp = [];
            let beneficiariesListTemp = [];
            insuranceList.result.response.map((insuranceItem, index) => {
                insuranceListTemp.push(insuranceItem.network);
            });
            setInsurances(insuranceListTemp);
            console.log("beneficiariesListTemp",beneficiariesListTemp);
        }

        if (insuranceList.error) {
            Alert.alert(
                I18n.t("ERROR_LABLE"),
                Utils.getErrorMsg(insuranceList),
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchGetListInsuranceReset());
                        }
                    }
                ],
                { cancelable: false }
            );
/*            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(insuranceList),
            );
            dispatch(fetchGetListInsuranceReset());*/
        }
    }, [insuranceList]);

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

                ],
                {cancelable: false}
            );
        }

        if (demandeAutorisationSoin.error) {
            Alert.alert(
                I18n.t("ERROR_LABLE"),
                Utils.getErrorMsg(demandeAutorisationSoin),
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchDemaneAutorisationSoinReset());
                        }
                    }
                ],
                { cancelable: false }
            );
/*            dropDownAlertRef.alertWithType(
                'error',
                I18n.t('ERROR_LABEL'),
                Utils.getErrorMsg(demandeAutorisationSoin),
            );
            dispatch(fetchDemaneAutorisationSoinReset());*/
        }
    }, [demandeAutorisationSoin]);

    const renderLoader = () => (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            {Platform.OS === 'android'
                ?
                (
                    <>
                        <ProgressBarAndroid/>
                        <Text>{I18n.t('LOADING_DOTS')}</Text>

                    </>
                ) :
                <>
                    <ActivityIndicator size="large" color={'#ccc'}/>
                    <Text>{I18n.t('LOADING_DOTS')}</Text>
                </>
            }
        </View>
    );
    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={beneficiaries}
                                  ListEmptyComponent={<Text body2>{I18n.t('NO_ASSURE')}</Text>}
                                  keyExtractor={(item, index) => index}
                                  renderItem={({item, index}) => {
                                      return (
                                          <View style={{
                                              paddingVertical: 0,
                                              alignItems: 'flex-start',
                                          }}>
                                              <TouchableOpacity
                                                  style={[
                                                      styles.contentActionModalBottom,
                                                      {borderBottomColor: Color.borderColor, width: "100%"},
                                                  ]}
                                                  key={item.id}
                                                  onPress={() => {
                                                      if(item.id === user.id)
                                                          setBeneficiaryId(null);
                                                      else
                                                        setBeneficiaryId(item.id);
                                                      setModalListAssure(false);
                                                  }}>
                                                  <Text body2 semibold>
                                                      {`${item.firstname} ${item.lastname} ${item.id === user.id ? '('+I18n.t('MY_ACCOUNT')+')' : ''}`}
                                                  </Text>
                                              </TouchableOpacity>
                                          </View>
                                      )
                                  }}/>

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

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

    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}}>
                    <Formik validationSchema={RegisterSchema}
                            initialValues={{
                                password: '',
                                code_acte: ''
                            }}
                            onSubmit={(values) => {
                                if (user !== null) {
                                    if (insurance === null) {
                                        insurancesRef.shake(800);
                                    } else if (values.code_acte === '')
                                        codeActeRef.shake(200)
                                    else {
                                            fetchDemaneAutorisationSoin({
                                                act_id: values.code_acte,
                                                insurance_id: insurance.id,
                                                beneficiary_id: beneficiaryId,
                                                password: values.password
                                            });
                                        console.log(user);
                                        console.log("insurance", insurance);
                                    }
                                }
                            }}>

                        {({
                              values,
                              errors,
                              touched,
                              handleChange,
                              handleBlur,
                              setFieldValue,
                              setFieldTouched,
                              handleSubmit,
                              isSubmitting,
                          }) => (<>
                            {
                                insuranceList.loading
                                    ? renderLoader()
                                    : insuranceList.result ?
                                        <View style={styles.contain}>
                                            <Animatable.View ref={(comp) => {
                                                insurancesRef = comp
                                            }}
                                                             style={{
                                                                 width: responsiveWidth(90),
                                                                 height: 60,
                                                                 alignSelf: 'center',
                                                                 borderRadius: 10,
                                                                 paddingLeft: 20,
                                                                 paddingRight: 20,
                                                                 backgroundColor: 'white'
                                                             }}>
                                                <Dropdown
                                                    label={I18n.t('SELECT_INSURANCE')}
                                                    data={insuranceList.result.response}
                                                    useNativeDriver={true}
                                                    onChangeText={(value, index, data) => {
                                                        console.log("Value", value);
                                                        setInsurance(value);
                                                        setBeneficiaries([...value.beneficiaries, {id: user.id, firstname: user.firstname, lastname: user.lastname}]);
                                                        fetchGetNetworkActs(value.network.id, '', '&authorization_type=PRIOR')
                                                    }}
                                                    valueExtractor={(value) => {
                                                        return value
                                                    }}
                                                    labelExtractor={(value) => {
                                                        return value.network.name
                                                    }}
                                                />
                                            </Animatable.View>

                                            <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);
                                                        setModalListAssure(true);
                                                    }}
                                                    valueExtractor={(value) => {
                                                        return value
                                                    }}
                                                    labelExtractor={(value) => {
                                                        return value.name
                                                    }}
                                                />
                                            </Animatable.View>

                                            <PasswordInput
                                                style={{marginTop: 10}}
                                                onChangeText={handleChange('password')}
                                                placeholder={I18n.t('PASSWORD')}
                                                secureTextEntry
                                                icon={<FontAwesome name="lock" size={20}/>}
                                                value={values.password}
                                                onBlur={handleBlur('password')}
                                                success={touched.password && !errors.password}
                                                touched={touched.password}
                                                error={errors.password}
                                            />

                                            <Button
                                                style={{marginTop: 20}}
                                                full
                                                loading={demandeAutorisationSoin.loading}
                                                onPress={handleSubmit}>
                                                {I18n.t('SUBMIT_LABEL')}
                                            </Button>
                                        </View>
                                        : null}
                        </>)}
                    </Formik>
                    {modalListAssure && renderListAssure()}
                </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
});

export default connect(mapStateToProps, {
    fetchActivePaySubscription,
    fetchGetNetworkActs,
    fetchAcceptRejectConsultation,
    fetchGetListInsuranceWithBeneficiaries,
    fetchDemaneAutorisationSoin
})(
    DemandeAutorisationSoinScreen,
);
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',
    },
});