/**
 * Project iLinkWorld
 * File ValidateConsultationDetailScreen
 * Path screens/wallet/user
 * Created by BRICE ZELE
 * Date: 01/12/2021
 */
import React, {useEffect, useState} from "react";
import {BaseStyle} from "../../../config/BaseStyle";
import {Alert, SafeAreaView, ScrollView, StyleSheet, View} from "react-native";
import I18n from 'react-native-i18n';
import {Color as BaseColor} from "../../../config/Color";
import Text from '../../../components/Text';
import {createStructuredSelector} from "reselect";
import {
    selectAcceptRefuseConsultation,
    selectActivatePaySubscription,
    selectGetConsultation,
    selectSubscriptionList
} from "../../../redux/insurance/insurance.selector";
import {connect, useDispatch} from "react-redux";
import {
    fetchAcceptRejectConsultation,
    fetchAcceptRejectConsultationReset,
    fetchActivePaySubscription,
    fetchGetConsultation, fetchStopSubscriptionReset
} from "../../../redux/insurance/insurance.actions";
import * as Utils from "../../../utils/UtilsFunction";
import {uppercaseFirstLetter} from "../../../utils/UtilsFunction";
import moment from "moment-timezone";
import CustomButton from "../../../components/CustomButton";
import {readUser} from "../../../webservice/AuthApi";
import DropdownAlert from "react-native-dropdownalert";

const ValidateConsultationDetailScreen = ({navigation, fetchAcceptRejectConsultation, acceptRefuseConsultation}) => {

    const dispatch = useDispatch();
    const [consultation, setConsultation] = useState(navigation.getParam('item'));
    const [user, setUser] = useState(null);

    let dropDownAlertRef: any = null;
    useEffect(() => {
        readUser().then((user) => {
            setUser(user);
        });
        dispatch(fetchAcceptRejectConsultationReset());
    }, []);

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

                ],
                {cancelable: false}
            );
        }

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

    console.log("Consultation", consultation);
    return (
        <SafeAreaView style={BaseStyle.safeAreaView} forceInset={{top: 'always'}}>
            <DropdownAlert ref={ref => (dropDownAlertRef = ref)}/>
            <ScrollView>
                <View style={styles.contain}>

                    <View style={[styles.contentRow]}>
                        <View
                            style={styles.colCenter}>
                            <Text body1 light>
                                {I18n.t('PATIENT')}
                            </Text>
                            <Text body2>
                                {`${consultation.patient_lastname} ${consultation.patient_firstname}`}
                            </Text>
                            <Text body2>{consultation.patient_situation.toLowerCase()}</Text>
                        </View>
                        <View
                            style={styles.colCenter}>
                            <Text body1 light>
                                {I18n.t('PRATICIEN')}
                            </Text>
                            <Text body2>
                                {`${consultation.practitioner_lastname} ${consultation.practitioner_firstname}`}
                            </Text>
                            <Text
                                body2>{uppercaseFirstLetter(consultation.practitioner_provider_class.toLowerCase())}</Text>
                        </View>
                    </View>

                    <View style={styles.line}/>
                    <View style={{flexDirection: 'row'}}>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                {I18n.t('STATE')}
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {uppercaseFirstLetter(consultation.state.toLowerCase())}
                            </Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                Type
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {uppercaseFirstLetter(consultation.type.toLowerCase())}
                            </Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 25}}>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                {I18n.t('CONDITION_PRISE_CHARGE')}
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {uppercaseFirstLetter(consultation.care_condition.toLowerCase())}
                            </Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                {I18n.t('INSTITUTE_NAME')}
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {uppercaseFirstLetter(consultation.institution_name.toLowerCase())}
                            </Text>
                        </View>
                    </View>
                    <View style={{flexDirection: 'row', marginTop: 25}}>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                Date
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {moment(consultation.created_at).format('YYYY-MM-DD')}
                            </Text>
                        </View>
                    </View>

                    <View style={styles.line}/>
                    <View style={{flexDirection: 'row', marginTop: 25}}>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                {I18n.t('EXAMEN')}
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {consultation.exams.length}
                            </Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                {I18n.t('MEDICAMENT')}
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {consultation.prescriptions.length}
                            </Text>
                        </View>
                    </View>

                    <View style={{flexDirection: 'row', marginTop: 25}}>
                        <View style={{flex: 1}}>
                            <Text caption1 light>
                                {I18n.t('PRESTATION')}
                            </Text>
                            <Text headline style={{marginTop: 5}}>
                                {consultation.performances.length}
                            </Text>
                        </View>
                    </View>


                    <View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: 25}}>
                        <CustomButton onPress={() => {
                            fetchAcceptRejectConsultation({
                                health_care_sheet_id: consultation.id,
                                user_id: user.id,
                                action: "ACCEPT"
                            });
                        }}>
                            {I18n.t("ACCEPT")}
                        </CustomButton>
                        <CustomButton onPress={() => {
                            fetchAcceptRejectConsultation({
                                health_care_sheet_id: consultation.id,
                                user_id: user.id,
                                action: "REJECT"
                            });
                        }}>
                            {I18n.t("REJECT")}
                        </CustomButton>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

const mapStateToProps = createStructuredSelector({
    subscriptionList: selectSubscriptionList,
    activatePaySubscription: selectActivatePaySubscription,
    getConsultation: selectGetConsultation,
    acceptRefuseConsultation: selectAcceptRefuseConsultation
});

export default connect(mapStateToProps, {
    fetchActivePaySubscription,
    fetchGetConsultation,
    fetchAcceptRejectConsultation
})(
    ValidateConsultationDetailScreen,
);

const styles = StyleSheet.create({
    contain: {
        padding: 20,
        width: "100%"
    },
    classContent: {
        flexDirection: "row",
        justifyContent: "flex-end",
        marginBottom: 15
    },
    line: {
        width: "100%",
        height: 1,
        borderWidth: 0.5,
        borderColor: BaseColor.dividerColor,
        borderStyle: "dashed",
        marginVertical: 20
    },
    code: {
        width: "100%",
        padding: 20,
        alignItems: "center",
        justifyContent: "center"
    },
    contentRow: {flexDirection: "row"},
    centerView: {
        alignItems: "center",
        justifyContent: "center",
        marginHorizontal: 10
    },
    colCenter: {flex: 1, alignItems: "flex-start"}
});