import React, { useState, useRef } from 'react';
import * as Yup from 'yup';
import {  Formik } from 'formik';
import { useDispatch, useSelector } from 'react-redux';
import { Card,  Text, Button,  Surface, Checkbox, TouchableRipple, Avatar, Colors, RadioButton } from 'react-native-paper';
import { StyleSheet, View, Dimensions, ScrollView } from 'react-native';
import { useToast } from 'react-native-paper-toast';
import { updateDeliveryAgentAction, uploadDeliveryAgentImage } from '../../state/actions/deliveryagentAction';

const EditDeliveryAgent = (props: any) => {

    //navigation is used for navigation between screens
    //valueUpdate, CountryCode, StateCode are the props used in respective country, state, city fields
    // const { navigation, valueUpdate, CountryCode, StateCode, ...rest } = props
    const { data, navigation, closeModal, ...rest } = props;
    const dispatch = useDispatch();
    //toast for popup after successful API calls.
    const toast = useToast();
    // Role restriction
    const permissions = useSelector(state => state.auth.permissions);

    React.useEffect(() => {
        if (!(permissions.Address_Management === "write")) {
            toast.show({
                message: "You don't have access, contact your Administrator.", type: 'info', duration: 3000, position: 'top'
            });
            navigation.goBack();
        }
    }, [permissions]);
    //isSubmitted contains the data from Create API using state call
    const isSubmited = useSelector(state => state.deliveryagent.deliveryagentUpdate.isLoading);
    const loginEmail = useSelector(state => state.auth.user?.Email_Id);
    //Dropdowns
    const [typeDropDown, setTypeDropDown] = useState("");
    const [countryDropDown, setCountryDropDown] = useState(false);
    const [stateDropDown, setStateDropDown] = useState(false);
    const [cityDropDown, setCityDropDown] = useState(false);

    //mobile
    const phoneInput = useRef(null);
    const phoneRegExp = /^[0][\d]{3,4}[\-\s]*[\d]{6,7}$/
    // img upload
    const [image, setImage] = useState({ preview: data?.Image_Path, raw: data?.Image_Path });
    const [imgUrl, setImgUrl] = useState(data?.Image_Path);
    const [uploadPic, setUploadPic] = useState(false);

    const callBackUploadImage = (data: any) => {
        if (data) {
            setImgUrl(data.File_URL);
        }
        setUploadPic(false);
    };

    const handleImage = async (result: any) => {
        const img = await fetchImageFromUri(result.uri);
        setImage({
            preview: result.uri,
            raw: img
        });
        dispatch(
            uploadDeliveryAgentImage(img, callBackUploadImage)
        );
    };

    const fetchImageFromUri = async (uri: any) => {
        const response = await fetch(uri);
        const blob = await response.blob();
        return blob;
    };

    const handleRemoveImage = e => {
        setImgUrl('');
        setImage({
            preview: '',
            raw: ''
        });
    };
    //dimensions
    const [dimensions, setDimensions] = React.useState(Dimensions.get('window').width);
    React.useEffect(() => {
        const subscription = Dimensions.addEventListener(
            "change",
            ({ window, screen }) => {
                setDimensions(window.width);
            }
        );
        // return () => subscription?.remove();
    });
    /*====================================
            Handler
    ====================================*/

    const values = {
        Del_User_Email_ID: loginEmail,
        Partner_ID: data?.Partner_ID ? data?.Partner_ID : "",
        First_Name: data?.First_Name ? data?.First_name : "",
        Last_Name: data?.Last_Name ? data?.Last_Name : "",
        Full_Name: data?.Full_Name ? data?.Full_Name : "",
        DOB: data?.DOB ? data?.DOB : "",
        Mobile: data?.Mobile ? data?.Mobile : "",
        Gender: data?.Gender ? data?.Gender : "",
        // Aadhar: data?.Aadhar ? data?.Aadhar : "",
        // License: data?.License ? data?.License : "",
        Role: data?.Role ? data?.Role : "",
        Profile_Pic_Path: imgUrl,
        Is_Active: data?.Is_Active > 0 ? true : false,
        Marketing_Agreed: data?.Marketing_Agreed > 0 ? true : false,
        T_And_C_Aggreed: data?.T_And_C_Aggreed > 0 ? true : false
    }
    //Form validation
    const Form_Validation = Yup.object().shape({
    })

    const onSubmit = (values: any, { setSubmitting, setErrors }: { setSubmitting: any, setErrors: any }) => {
        let submitTest = true;
        setSubmitting(false);
        // const errors = {};
        // setErrors(errors);

        if (submitTest) {
            let formValues = JSON.parse(JSON.stringify(values));
            if (values.Marketing_Agreed) {
                formValues.Marketing_Agreed = 1;
            } else {
                formValues.Marketing_Agreed = 0;
            }
            if (values.T_And_C_Aggreed) {
                formValues.T_And_C_Aggreed = 1;
            } else {
                formValues.T_And_C_Aggreed = 0;
            }
            if (values.Is_Active) {
                formValues.Is_Active = 1;
            } else {
                formValues.Is_Active = 0;
            }
            dispatch(updateDeliveryAgentAction(formValues, navigation, toast));
            navigation.navigate('deliveryAgentDetails')
        }
    }

    return (
        <Surface style={{ flex: 1 }}>
            <ScrollView>
                <Formik initialValues={{ ...values }} onSubmit={onSubmit} validationSchema={Form_Validation}>
                    {(props) => (
                        <View style={{ flexDirection: "column", justifyContent: "flex-start", flexWrap: "wrap" }}>
                            <View style={{ alignItems: 'flex-end' }}>
                                <TouchableRipple style={{ width: 36 }} onPress={closeModal}>
                                    <Avatar.Icon color={Colors.black} style={{ backgroundColor: Colors.white }} size={36} icon="close" />
                                </TouchableRipple>
                            </View>
                            <Card style={{
                                width: dimensions <= 500 ? "98%" : "75%", marginLeft: "auto", marginRight: "auto",
                                marginTop: "2%", marginBottom: "2%", borderRadius: 10, borderWidth: 0.5, borderColor: '#D6D6D7'
                            }}>
                                <Card.Content>
                                    <Text style={{ fontSize: 20, fontWeight: "bold" }}>
                                        Make An Active ?
                                    </Text>
                                    <View style={{ flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", paddingTop: 15, paddingBottom: 15 }}>
                                        <View style={{ flexShrink: 1, flexDirection: "row" }} >
                                            {/* <Checkbox
                                                name="Is_Active"
                                                status={props.values.Is_Active ? 'checked' : 'unchecked'}
                                                onPress={() => {
                                                    props.setFieldValue("Is_Active", !props.values.Is_Active);
                                                }}
                                            /> */}
                                            <RadioButton
                                            value="Is_Active"
                                            status={props.values.Is_Active ? 'checked' : 'unchecked'}
                                            onPress={() => {
                                                props.setFieldValue("Is_Active", !props.values.Is_Active);
                                            }}
                                        />
                                            <Text style={{ marginTop: 10 }}>Is Active</Text>
                                        </View>                                        
                                    </View>
                                    <View style={{ width: 130, marginLeft: "auto", marginRight: "auto" }}>
                                        <Button disabled={isSubmited || uploadPic} style={{ marginTop: "3%" }} mode="contained" onPress={props.handleSubmit}>
                                            Save
                                        </Button>

                                    </View>
                                </Card.Content>
                            </Card>
                        </View>
                    )}
                </Formik>
            </ScrollView>
        </Surface>
    );
};

const styles = StyleSheet.create({
    label: {
        marginBottom: 30,
    },
    dropdownlabel: {
        position: 'absolute',
        backgroundColor: 'white',
        color: 'black',
        left: 22,
        top: 10,
        zIndex: 999,
        paddingHorizontal: 8,
        fontSize: 14,
    },
    dropdown: {
        height: 58,
        borderColor: 'gray',
        borderWidth: 0.5,
        borderRadius: 5,
        paddingHorizontal: 8,
    },
    images: {
        width: '100%',
        height: 100,
        borderRadius: 5,
        marginBottom: 15
    },
    placeholderStyle: {
        fontSize: 16,
    },
    selectedTextStyle: {
        fontSize: 16,
    },
    iconStyle: {
        width: 20,
        height: 20,
    },
    inputSearchStyle: {
        height: 40,
        fontSize: 16,
    },
});

export default EditDeliveryAgent;