import { View, Text, Image, TextInput, TouchableOpacity, StyleSheet, ScrollView, Platform, Pressable, SafeAreaView, Button, FlatList, StatusBar ,Modal} from 'react-native'
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useCallback, useState, useRef } from 'react';
import { useForm, useFormContext } from 'react-hook-form';
import SegmentedControl from '@react-native-segmented-control/segmented-control';

import { Alert } from 'react-native';

import * as ImagePicker from 'expo-image-picker';
import UserAvatar from 'react-native-user-avatar';
import TextFieldGroup from '../components/TextFieldGroup';
import CustomSelect from '../components/CustomSelect';
import actions from '../../redux/actions';
import { addEmployee, fetchEmployeeSeqNumber, updateEmployee } from '../../store/employee/employeeThunk';
import { useDispatch, useSelector } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import moment from 'moment';
import { Checkbox, Portal } from 'react-native-paper';
import MultiSelect from '../components/MultiSelect';
import SelectDropdown from 'react-native-select-dropdown';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import { SceneMap, TabView } from 'react-native-tab-view';
import Animated from 'react-native-reanimated';
import CheckBox from 'react-native-check-box';
import SignatureCanvas from 'react-native-signature-canvas';
import SignatureScreen from '../wishlist';
import Divider from '../../components/Divider';
import * as DocumentPicker from 'expo-document-picker';
import { addDoc } from '../../store/docAttach/docAttachThunk';


import { ALERT_TYPE, Dialog } from 'react-native-alert-notification';


export default function AddEmployee({ route, navigation }) {

    // const { docs } = useAppSelector(state => state.docAttach);
    

    // attachments
    const [fetchDocs, setFetchDocs] = useState('');
    const [docData, setDocData] = useState([]);

    // const navigation = useNavigation();
    const [signModel, setSignModel] = useState(false);
    const [tab2, setTab2] = useState(0);
    const [page, setPage] = useState(0);



    const [isCompliance, setIsCompliance] = useState(false);

    const [bankPhoto, setBankPhoto] = useState(null);
    const [aadharCard, setAadharCard] = useState(null);
    const [panCard, setPanCard] = useState(null);
    const [passbook, setPassbook] = useState(null);
    const [pvc, setpvc] = useState(null);
    const [bvc, setbvc] = useState(null);
    const [signatureImage, setSignatureImage] = useState(null);

    const [ship, setShip] = useState(false);


    const genderOptions = [
        { label: 'Male', value: 'male' },
        { label: 'Female', value: 'female' },
        { label: 'Other', value: 'other' },
    ];

    const [error, setErrors] = useState([]);

    const [language, setLanguage] = useState([]);
    const [uniform, setUniform] = useState([]);
    // const [data1, setData1] = useState({ label: 'Hindi', value: 'hindi' });

    const [image, setImage] = useState(null);

    const [isLoading , setIsLoading] = useState(false);
    const [attachments , setAttachments] = useState([]);
    const [deleteDocs , setDeleteDocs] = useState([]);

    const pickImage = async (img, type) => {
        // No permissions request is necessary for launching the image library
        let result;
        if (type === 'photo') {
            result = await ImagePicker.launchCameraAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.All,
                allowsEditing: true,
                aspect: [1, 1],
                quality: 1,
                presentationStyle:''
            });
        } else {
            result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.All,
                allowsEditing: true,
                aspect: [1, 1],
                quality: 1,
            });
        }

        console.log(result);
        const fileObj = {
            name: result.assets[0].fileName,
            uri: result.assets[0].uri,
            type: result.assets[0].mimeType, 
            size: result.assets[0].fileSize
        }

        if (!result.canceled) {
            if (img === 'img') setImage(fileObj);
  
        }
    };

    const [termsAndConditionPhoto, setTermsAndConditionPhoto] = useState(null);
    const [bgvConsentPhoto, setBgvConsentPhoto] = useState(null);
    const [thumbPhoto, setThumbPhoto] = useState(null);

    const pickFile = async (type) => {
        try {
            let result = await DocumentPicker.getDocumentAsync({
                type: "application/*", // for pdf, doc and docx
                copyToCacheDirectory: false
            });
            const fileObj = {
                name: result.assets[0].name,
                uri: result.assets[0].uri,
                type: result.assets[0].mimeType, 
                size: result.assets[0].size
            }

            if (type === 't&c') {
                if (termsAndConditionPhoto?.id)  {
                    setAttachments(attachments.filter(e => e !== termsAndConditionPhoto.id))
                    setDeleteDocs([...deleteDocs, termsAndConditionPhoto.id])
                }
                setTermsAndConditionPhoto({ data: fileObj, name: fileObj.name});
            }
            else if (type === 'bgv') {
                if (bgvConsentPhoto?.id)  {
                    setAttachments(attachments.filter(e => e !== bgvConsentPhoto.id))
                    setDeleteDocs([...deleteDocs, bgvConsentPhoto.id])
                }
                setBgvConsentPhoto({ data: fileObj, name: fileObj.name});
            }
            else if (type === 'thumb') {
                if (thumbPhoto?.id)  {
                    setAttachments(attachments.filter(e => e !== thumbPhoto.id))
                    setDeleteDocs([...deleteDocs, thumbPhoto.id])
                }
                setThumbPhoto({ data: fileObj, name: fileObj.name});
            }
        } catch (err) {
            if (DocumentPicker.isCancel(err)) {
                console.log(err);
                // User cancelled the picker, exit any dialogs or menus and move on
            } else {
                throw err;
            }
        }
    };

    const pickImageFile = async (img) => {
        try {
            let result = await DocumentPicker.getDocumentAsync({
                type: "image/*" ,// all images files
                copyToCacheDirectory: false
            });
            const fileObj = {
                name: result.assets[0].name,
                uri: result.assets[0].uri,
                type: result.assets[0].mimeType, 
                size: result.assets[0].size
            }
            if (img === 'bank') {
                if (bankPhoto?.id)  {
                    setAttachments(attachments.filter(e => e !== bankPhoto.id))
                    setDeleteDocs([...deleteDocs, bankPhoto.id])
                }
                setBankPhoto({ data: fileObj, name: fileObj.name});
            }
            if (img === 'aadhar') {
                if (aadharCard?.id)  {
                    setAttachments(attachments.filter(e => e !== aadharCard.id))
                    setDeleteDocs([...deleteDocs, aadharCard.id])
                }
                setAadharCard({ data: fileObj, name: fileObj.name});
            }
            else if (img === 'pan') {
                if (panCard?.id)  {
                    setAttachments(attachments.filter(e => e !== panCard.id))
                    setDeleteDocs([...deleteDocs, panCard.id])
                }
                setPanCard({ data: fileObj, name: fileObj.name});
            }
            else if (img === 'passbook') {
                if (passbook?.id)  {
                    setAttachments(attachments.filter(e => e !== passbook.id))
                    setDeleteDocs([...deleteDocs, passbook.id])
                }
                setPassbook({ data: fileObj, name: fileObj.name});
            }
            else if (img === 'bvc') {
                if (bvc?.id)  {
                    setAttachments(attachments.filter(e => e !== bvc.id))
                    setDeleteDocs([...deleteDocs, bvc.id])
                }
                setbvc({ data: fileObj, name: fileObj.name});
            }
            else if (img === 'pvc') {
                if (pvc?.id)  {
                    setAttachments(attachments.filter(e => e !== pvc.id))
                    setDeleteDocs([...deleteDocs, pvc.id])
                }
                setpvc({ data: fileObj, name: fileObj.name});
            }
        } catch (err) {
            if (DocumentPicker.isCancel(err)) {
                console.log(err);
      
            } else {
                throw err;
            }
        }
    };



    const {
        control,
        handleSubmit,
        formState: { errors },
        setValue,
        trigger,
        getValues
    } = useForm();


    useEffect(() => {
        setBankPhoto(null);
        setAadharCard(null);
        setPanCard(null);
        setPassbook(null);
        setpvc(null);
        setbvc(null);
        setSignatureImage(null);
        if (route.params.id) {
            setIsLoading(true);
            navigation.setOptions({ headerTitle: 'Edit Employee'})
            getEmployee();
        } else {
            getEmpId()
        }
    }, [])

    const getEmpId = async () => {
        await dispatch(fetchEmployeeSeqNumber(`${'Employee'}`)).then(async (data) => {
          if (data.payload) {
            setValue("empId", data.payload.employeeNumber);
          } 
        }).catch(e => {
          // console.log(e);
        });
    };

    const photoOptions = [
        {
            label: 'View Profile Photo',
            icon: 'eye',
            color: '#1da861',
            action: () => pickImage('img', 'photo')
        },
        {
            label: 'Open Camera',
            icon: 'frame',
            color: '#1da861',
            action: () => pickImage('img', 'photo')
        },
        {
            label: 'Choose from Galary',
            icon: 'picture',
            color: '#1da861',
            action: () => pickImage('img', 'camera')
        },
        {
            label: 'Remove Profile Photo',
            icon: 'minus',
            color: '#dc3545',
            action: () => setImage(null)
        }
    ]

    const setClientData = async (id) => {
        const selectedClient = await actions.fetchCounterPartyAccountById(id);
        if (selectedClient) setClient(selectedClient);
    }

    const getEmployee = async () => {
        try {
            const res = await actions.employeeById(route.params.id);
            
            setImage(res.photo);
            setValue("empId", res.empId);
            setValue("firstName", res.name.split(' ')[0]);
            setValue("lastName", res.name.split(' ')[1]);

            if (res.gender) setGender({ label: res.gender === 'male' ? 'Male' : res.gender === 'female' ? 'Female' : 'other', value: res.gender });
      
            setDob(res.dob);

            setClient(res.client);
            setLanguage([...res.languages]);
            if(res.uniform?.length > 0) {
                setUniform(res.uniform);
            }

            // setClientData(res.client._id);

            let address = []
            if(res.client?.addresses?.length > 0) {
                res.client.addresses.map(a => address.push({ label: `${a?.line1 && a?.line1 + ', '}${a?.line2 && a?.line2 + ', '}${a?.city && a?.city + ', '}${a?.state && a?.state + ', '}${a?.code}`, value: a._id }));
                setAddresses(address);
            }


            setValue("personalEmail", res.personalEmail);
            // setValue("businessEmail", res.businessEmail);
            setValue("primaryPhone", res.primaryPhone);
            if(res.alternatePhone !== "undefined") setValue("alternatePhone", res.alternatePhone);
            // setValue("isAlternatePhoneVerified", res.isAlternatePhoneVerified);
            // setValue("alternatePhoneRelation", res.alternatePhoneRelation);

            setValue("fatherName", res.fatherName);
            setValue("motherName", res.motherName);
            setIsMarried(res.isMarried);
            if(res.spouseName !== "undefined") setValue("spouseName", res.spouseName);
            if(res.spousePhone !== "undefined") setValue("spousePhone", res.spousePhone);
            if(res.bankLinkPhone !== "undefined") setValue("bankLinkPhone", res.bankLinkPhone);


            setValue("presentAddress", res.presentAddress);
            setValue("permanentAddress", res.permanentAddress);

            setEmergencyContacts(res.emergencyPhones);
            setDependents(res.dependents);
            setEducation(res.education);
            setPrevEmployer(res.prevEmployment);

            // setValue("languages", res.languages);
            // setLanguage(res.languages);

            setValue("grossSalary", res.salary[0].grossSalary);
            setValue("ctc", res.salary[0].ctc);
            setValue("assessmentYear", res.salary[0].assessmentYear);
            setJoinDate(res.dateOfJoining);
            setResignDate(res.dateofResign)
            // setValue("startDate", res.salary[0].startDate);
            // setValue("endDate", res.salary[0].endDate);
            // setValue("isActiveSalary", res.salary[0].active);
            setValue("reasonOfResign", res.reasonOfResign);

            setIsCompliance(res.isCompliance);
            setValue("nomineeName", res.nomineeName);
            if (res.nomineeRelation) setCompRelation({ label: res.nomineeRelation.substring(0, 1).toUpperCase() + res.nomineeRelation.substring(1), value: res.nomineeRelation })
     
            setSignatureImage(res.signature);
            if(res.attachments) {
                setAttachments(res.attachments.map(e => e._id));
                res.attachments.map(file => {
                    if(file.fieldName) {
                        if(file.fieldName === 'termsAndConditionPhoto') setTermsAndConditionPhoto({data: null, name: file.originalname, id:file._id})
                        if(file.fieldName === 'bgvConsentPhoto') setBgvConsentPhoto({data: null, name: file.originalname, id:file._id})
                        if(file.fieldName === 'thumbPhoto') setThumbPhoto({data: null, name: file.originalname, id:file._id})

                        if(file.fieldName === 'aadharCard') setAadharCard({data: null, name: file.originalname, url: file.url , id:file._id})
                        if(file.fieldName === 'pvc') setpvc({data: null, name: file.originalname, url: file.url, id:file._id })
                        if(file.fieldName === 'bvc') setbvc({data: null, name: file.originalname, url: file.url, id:file._id })
                        if(file.fieldName === 'panCard') setPanCard({data: null, name: file.originalname, url: file.url , id:file._id})
                        if(file.fieldName === 'passbook') setPassbook({data: null, name: file.originalname, url: file.url, id:file._id })
                    }
                })
            }
   
            if(res.baseLocation) {
                setBaseLocation({ label: `${res.baseLocation?.line1 && res.baseLocation?.line1 + ', '}${res.baseLocation?.line2 && res.baseLocation?.line2 + ', '}${res.baseLocation?.city && res.baseLocation?.city + ', '}${res.baseLocation?.state && res.baseLocation?.state + ', '}${res.baseLocation?.code}`, value: res.baseLocation?._id });
            }
            setIsLoading(false);
        } catch (err) {
            if (err) {
                console.log(err);
            }
        }
    }

    const userData = useSelector((state) => state.auth.userData);

    const dispatch = useDispatch();

    const getFormData = (object) => {
        var newform = new FormData();
        Object.keys(object).forEach(key => {
            // newform.append(key, JSON.stringify(object[key]))
            if (Array.isArray(object[key])) {
                newform.append(key, JSON.stringify(object[key]));
            } else {
                newform.append(key, object[key]);
            }
        });
        return newform;
    };

    const handleClient = (myclient) => {
        setClient(myclient);
        setBaseLocation(null);
        let address = []
            if(myclient?.addresses?.length > 0) {
                myclient.addresses.map(a => address.push({ label: `${a?.line1 && a?.line1 + ', '}${a?.line2 && a?.line2 + ', '}${a?.city && a?.city + ', '}${a?.state && a?.state + ', '}${a?.code}`, value: a._id }));
                setAddresses(address);
            }
    }

    const AddEmployee = async (values) => {
        if (!dob || !gender || (language.length <= 0) || !baseLocation || !client || (page === 2 && !compRelation && isCompliance)) {
            let errdata = []
            if (!dob) errdata.push('dob');
            if (!gender) errdata.push('gender');
            if (!client) errdata.push('client');
            if (!baseLocation) errdata.push('baselocation');
            if (language.length <= 0) errdata.push('lang');
            if (isCompliance) if (!compRelation) errdata.push('compRelation');
            setErrors([...error, ...errdata]);
        } else {
            if (page === 2) {

                try {
                    values.isMarried = isMarried;
                    // values.empId = "yhgtd";
                    values.account = userData.user.accounts[0]._id;
                    // values.isPrevEmployment = ;

                    values.gender = gender.value;
                    values.baseLocation = baseLocation.value;
                    values.languages = language;
                    // values.gender = gender === 0 ? 'male' : gender === 1 ? 'female' : gender === 2 ? 'other' : null;
                    values.emergencyPhones = emergencyContacts;
                    values.dependents = dependents;
                    values.education = education;
                    values.prevEmployment = prevEmployer;
                    values.uniform = uniform;
                    if(joinDate) values.dateOfJoining = String(joinDate);
                    if(resignDate) values.dateofResign = String(resignDate);

                    values.isCompliance = isCompliance;
                    values.salary = [{
                        grossSalary: values.grossSalary,
                        ctc: values.ctc,
                        assessmentYear: values.assessmentYear,
                        startDate: joinDate && String(joinDate),
                        endDate: resignDate && String(resignDate)
                    }];
                    if(compRelation) values.nomineeRelation = compRelation?.value;

                    let formData = getFormData(values);

                    formData.append('name', values.firstName + ' ' + values.lastName);
                    formData.append('photo', image);
                    formData.append('dob', String(dob));
                    formData.append('client', client._id);

                    // const uniformData = {
                    //     items: uniform
                    // };
                    // formData.append('uniform', JSON.stringify(uniformData));

                    if(signatureImage) formData.append('signature', signatureImage);
                    // formData.append('bank', client._id);
                    // if(aadharCard) formData.append('aadhar', aadharCard);
                    // if(panCard) formData.append('tinPan', panCard);
                    // if(passbook) formData.append('passbook', passbook);
                    // if(pvc) formData.append('pvc', pvc);
                    // if(bvc) formData.append('bvc', bvc);

                    // if(thumbPhoto) formData.append('thumbPhoto', thumbPhoto);
                    // if(termsAndConditionPhoto) formData.append('termsAndConditionPhoto', termsAndConditionPhoto);
                    // if(bgvConsentPhoto) formData.append('bgvConsentPhoto', bgvConsentPhoto);


                    await DeleteDocs(deleteDocs);

                    const fileData = await UploadAllFiles(); 

                    const myFiles = [...attachments, ...fileData];

                    if(fileData.length > 0) formData.append('attachments', JSON.stringify(myFiles));

                    // const res = await actions.createEmployee(data);
                    if (!route.params.id) {
                        await dispatch(addEmployee(formData)).unwrap().then(async (res) => {
                            if (res) {
                                route.params.refresh();
                                navigation.goBack();
                                showSuccessDialog('Employee created successfully!');
                                // Alert.alert('Success', 'Employee created successfully!', [
                                //     { text: 'OK', onPress: () => console.log('OK Pressed') },
                                //   ]);
                            }
                        });
                    } else {
                        // alert(JSON.stringify(formData));
                        await dispatch(updateEmployee({ id: route.params.id, employeePayload: formData })).unwrap().then(async (res) => {
                            if (res) {
                                // route.params.refresh();
                                navigation.goBack();
                                showSuccessDialog('Employee updated successfully!');
                                // Alert.alert('Success', 'Employee data updated successfully!', [
                                //     { text: 'OK', onPress: () => console.log('OK Pressed') },
                                //   ]);
                        
                            }
                        });
                        // await actions.updateEmployee(route.params.id,formData).then(async (res) => {
                        //     if (res) {
                        //         route.params.refresh();
                        //         navigation.goBack();
                        //     }
                        // });
                    }
                } catch (err) {
                    if (err) {
                        console.log(err);
                    }
                }
            } else {
                if (page < 2) {
                    setPage(page + 1)
                }
            }
        }
    }


    const showSuccessDialog = (message) => {
        Dialog.show({
            type: ALERT_TYPE.SUCCESS,
            title: 'Success',
            textBody: message,
            button: 'Close',
        });
    };



    const UploadAllFiles = async () => {
        const fileOptions = [
            { fileObj: termsAndConditionPhoto?.data, objName: 'termsAndConditionPhoto' },
            { fileObj: bgvConsentPhoto?.data, objName: 'bgvConsentPhoto' },
            { fileObj: thumbPhoto?.data, objName: 'thumbPhoto' },
            { fileObj: pvc?.data, objName: 'pvc' },
            { fileObj: bvc?.data, objName: 'bvc' },
            { fileObj: aadharCard?.data, objName: 'aadharCard' },
            { fileObj: panCard?.data, objName: 'panCard' },
            { fileObj: passbook?.data, objName: 'passbook' },
        ];

        const attachmentsData = await Promise.all(
            fileOptions.map(async (file) => {
              const fileId = await UploadFile(file.fileObj, file.objName);
              if(fileId) return fileId;
              else return null;
            })
          );
        
        return attachmentsData.filter(e=> e !== null);;
    };

    const UploadFile = async (dataObj, objName) => {
        if(dataObj) {
            const fileForm = new FormData();
            fileForm.append('attachment', dataObj);
            let fileResObj = await actions.uploadDoc(fileForm,String(objName));
            if (fileResObj?.message === 'Success! Attachment created!') {
                return fileResObj?.doc?._id;
            } 
        }
    }

    const DeleteDocs = async (ids) => {
        if(ids && ids.length > 0) {
            ids.map(async (id) => {
                await actions.deleteDoc(id);
                // if (fileResObj?.message === 'Success! Attachment created!') {
                //     return fileResObj?.doc?._id;
                // } 
            })
        }
    }

 
        return (
            <View style={[styles.tabBar, { borderBottomColor: '#c7c7c9', borderBottomWidth: 0.2, paddingTop: 5, paddingRight: '35%' }]}>

                <View className='flex flex-row absolute right-[2] bottom-[6]' >
                    {index1 === 0 ? '' : <TouchableOpacity className='mr-[7]' onPress={() => setIndex1(index1 - 1)}>
                        <SimpleLineIcons name='arrow-left-circle' color={'#1da861'} size={21} />
                    </TouchableOpacity>}

                    {index1 === 1 ? '' : <TouchableOpacity onPress={() => setIndex1(index1 + 1)}>
                        <SimpleLineIcons name='arrow-right-circle' color={'#1da861'} size={21} />
                    </TouchableOpacity>}
                </View>

                {props.navigationState.routes.map((route, i) => {
                    return (
                        <TouchableOpacity
                            style={{ flex: 1, alignItems: 'center' }}
                            onPress={() => setIndex1(i)}>
                            <Animated.Text className="[font-family:'Poppins-Medium'] text-[13px] tracking-wide" style={{ color: index1 === i ? '#1da861' : "#8e8e8e", borderBottomColor: '#1da861', borderBottomWidth: index1 === i ? 2 : 0, paddingBottom: 6 }}>{route.title}</Animated.Text>
                        </TouchableOpacity>
                    );
                })}
            </View>
        );
    };

    useEffect(() => {
        if (ship) setValue("permanentAddress", getValues('presentAddress'));
    }, [ship])

    return (
        <>


            <View className='flex flex-row top-0 w-full bg-[#ebe9f1] pl-4 pt-7'>
                {/* <Ionicons name="person-circle-outline" size={33} color="#888" style={{marginTop:10}}/> */}
                <TouchableOpacity
                    onPress={() => navigation.goBack()}
                    style={{width:35,height:35,backgroundColor:'#e2e0ec',borderRadius:25,marginTop:10,alignItems:'center',justifyContent:'center'}}
                >
                    <Ionicons name="arrow-back" size={20} color="#888" />
                </TouchableOpacity> 
                
                <Text className=" [font-family:'Poppins-SemiBold'] text-[20px] p-3 pl-2 pb-2">
                
                {route.params.id ? 'Update Employee' : 'Add Employee'}
                </Text>
            </View>
            
            <ScrollView className='w-full h-full bg-[#f3f2f7]' 
            // nestedScrollEnabled={true} directionalLockEnabled={true}
            >
                <View className="bg-white flex flex-row justify-center item-center w-full h-full">
                {!isLoading && 
                    <View className="bg-white w-full h-full relative bg-[#f3f2f7] pt-0">

                        {/* //header this side asap */}


                        <View className=" p-3 pt-0 ">


                            <View className="p-2 pt-0">

                                {/* <Text className="mt-2 text-center [font-family:'Poppins-Regular'] tracking-wider text-[13px] pl-[15]  w-full color-[#8e8e8e]">
                                    EMPLOYEE ID: EMPXX1234
                                </Text> */}
                                <TextFieldGroup title={'Employee Id'}
                                    data={[{
                                        title: "Employee Id",
                                        name: "empId",
                                        type: "text",
                                        control: control,
                                        rules: {
                                            required: true
                                        },
                                        label: false,
                                        readOnly: true
                                    }]}
                                />

                                <View className="flex flex-row">

                                    <SelectDropdown
                                        // ref={moodDropdownRef}
                                        data={image ? photoOptions : photoOptions.slice(1, 3)}
                                        disableAutoScroll
                                        dropdownOverlayColor='rgba(0,0,0,0.1)'
                                        onSelect={(selectedItem, index) => {
                                            selectedItem.action();
                                            // moodDropdownRef.current.reset();
                                        }}
                                        renderButton={(selectedItem, isOpen) => {
                                            return (
                                                <View className="w-[35%]" style={styles.container2}>
                                                    {image ? 
                                                    <Image style={styles.profilePic}
                                                        source={{uri:image?.uri ? image.uri : image}}
                                                    /> :
                                                    <UserAvatar size={80} 
                                                        name={getValues('firstName')+' '+getValues('lastName')}
                                                        bgColors={['#dbdbe3', '#d0d1d6', '#c9cacf']}
                                                        // src="https://staging-ibook.s3.ap-south-1.amazonaws.com/660a659ce39738a30577ef99/documents/1716751147701_0_9483207587823161.jpeg"
                                                    />}
                                                </View>
                                            );
                                        }}
                                        renderItem={(item, index, isSelected) => {
                                            return (
                                                <View key={index} style={[styles.dropdown2ItemStyle, index === photoOptions.length - 1 ? { borderBottomWidth: 0 } : {}]}>
                                                    <Text className="[font-family:'Poppins-Regular']" style={[styles.dropdown2ItemTxtStyle, { color: item.color,marginBottom:-5 }]}>{item.label}</Text>
                                                    <SimpleLineIcons name={item.icon} size={16} color={item.color} />
                                                </View>
                                            );
                                        }}
                                        dropdownStyle={styles.dropdown2MenuStyle}
                                        showsVerticalScrollIndicator={false}
                                    />


                                            <View>
                                                <TextFieldGroup title={'Terms & Conditions'} />
                                                {termsAndConditionPhoto && <TouchableOpacity
                                                    onPress={() => setTermsAndConditionPhoto(null)}
                                                    style={{ position: 'absolute', top: 10, right: 0 }}
                                                >
                                                    <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                </TouchableOpacity>}

                                                {termsAndConditionPhoto ?
                                                    <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                        onPress={() => pickFile('t&c')}
                                                    >
                                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">{termsAndConditionPhoto.name}</Text>
                                                        {/* <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} /> */}
                                                    </TouchableOpacity>
                                                    :
                                                    <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                        onPress={() => pickFile('t&c')}
                                                    >
                                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Terms & Conditions</Text>
                                                        <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                    </TouchableOpacity>}
                                            </View>

                                            <View>
                                                <TextFieldGroup title={'BGV Consent Form'} />
                                                {bgvConsentPhoto && <TouchableOpacity
                                                    onPress={() => setBgvConsentPhoto(null)}
                                                    style={{ position: 'absolute', top: 10, right: 0 }}
                                                >
                                                    <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                </TouchableOpacity>}

                                                {bgvConsentPhoto ?
                                                    <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                        onPress={() => pickFile('bgv')}
                                                    >
                                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">{bgvConsentPhoto.name}</Text>
                                                        {/* <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} /> */}
                                                    </TouchableOpacity>
                                                    :
                                                    <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                        onPress={() => pickFile('bgv')}
                                                    >
                                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add BGV Consent Form</Text>
                                                        <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                    </TouchableOpacity>}
                                            </View>

                                            <View>
                                                      

                                                            <Modal visible={signModel}>
                                                                <SignatureScreen setMySignature={setSignatureImage} Close={()=> setSignModel(!signModel)}/>
                                                                <TouchableOpacity onPress={()=> setSignModel(!signModel)} className='p-3 bottom-[20%] bg-blue-500'><Text className='color-[#fff] text-center'>Close</Text></TouchableOpacity>
                                                            </Modal>

                                                            <TextFieldGroup title={'Signature'} />

                                                            {signatureImage && <TouchableOpacity
                                                                onPress={() => setSignatureImage(null)}
                                                                style={{ position: 'absolute', top: 15, right: 0 }}
                                                            >
                                                                <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                            </TouchableOpacity>}

                                                            {signatureImage ? 
                                                            <TouchableOpacity onPress={()=> setSignModel(!signModel)} className='flex flex-row p-2 mt-1' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                                 <Image 
                                                                        source={{ uri: String(signatureImage) }}
                                                                        resizeMode={'contain'}
                                                                        style={{ width: '100%', height: 200 }}
                                                                    />
                                                            </TouchableOpacity> 
                                                            :
                                                                <TouchableOpacity className='flex flex-row p-2 ' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                                    onPress={() => setSignModel(true)}
                                                                >
                                                                    <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Signature</Text>
                                                                    <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                                </TouchableOpacity>}
                                            </View>

                                            <View>

                                                <TextFieldGroup title={'Thumb'} />

                                                {thumbPhoto && <TouchableOpacity
                                                    onPress={() => setThumbPhoto(null)}
                                                    style={{ position: 'absolute', top: 10, right: 0 }}
                                                >
                                                    <Ionicons name='close-circle-outline' color={'#dc3545'} size={20} />
                                                </TouchableOpacity>}

                                                {thumbPhoto ?
                                                    <TouchableOpacity className='flex flex-row p-2' style={{ borderStyle: 'solid', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                        onPress={() => pickFile('thumb')}
                                                    >
                                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">{thumbPhoto.name}</Text>
                                                        {/* <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} /> */}
                                                    </TouchableOpacity>
                                                    :
                                                    <TouchableOpacity className='flex flex-row p-2' style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: error.includes('baselocation') ? '#dc3545' : "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}
                                                        onPress={() => pickFile('thumb')}
                                                    >
                                                        <Text style={{ color: error.includes('baselocation') ? '#dc3545' : "#1da861" }} className="[font-family:'Poppins-Regular'] pt-0.5 mr-0.5 text-md">Add Thumb File</Text>
                                                        <Icon name="plus" size={16} color={error.includes('baselocation') ? '#dc3545' : "#1da861"} />
                                                    </TouchableOpacity>}
                                            </View>

                                            <View>

                                                <TextFieldGroup title={'Other KYC Details'} />


                                                <Pressable onPress={() => pickImageFile('aadhar')} className='flex flex-row p-2 mt-1' style={{ borderStyle: aadharCard ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                    {!!aadharCard ? <>
                                                        <Image className='mb-3'
                                                            source={{ uri: aadharCard?.data?.uri ? aadharCard?.data?.uri : aadharCard?.url  }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Aadhar Card</Text>
                                                    </> : <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Aadhar Card</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>}
                                                </Pressable>

                                                <Pressable onPress={() => pickImageFile('pan')} className='flex flex-row p-2 mt-3' style={{ borderStyle: panCard ? 'solid' :  'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                    {!!panCard ? <>
                                                        <Image className='mb-3'
                                                            source={{ uri: panCard?.data?.uri ? panCard?.data?.uri : panCard?.url  }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Pan Card</Text>
                                                    </> : <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Pan Card</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>}
                                                </Pressable>

                                                <Pressable onPress={() => pickImageFile('passbook')} className='flex flex-row p-2 mt-3' style={{ borderStyle: passbook ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                    {!!passbook ? <>
                                                        <Image className='mb-3'
                                                            source={{ uri: passbook?.data?.uri ? passbook?.data?.uri : passbook?.url  }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">Passbook</Text>
                                                    </> : <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add Passbook</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>}
                                                </Pressable>

                                                <Pressable onPress={() => pickImageFile('pvc')} className='flex flex-row p-2 mt-3' style={{ borderStyle:pvc ? 'solid' :  'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                    {!!pvc ? <>
                                                        <Image className='mb-3'
                                                            source={{ uri: pvc?.data?.uri ? pvc?.data?.uri : pvc?.url  }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">PVC</Text>
                                                    </> : <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add PVC</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>}
                                                </Pressable>

                                                <Pressable onPress={() => pickImageFile('bvc')} className='flex flex-row p-2 mt-3' style={{ borderStyle: bvc ? 'solid' : 'dashed', borderWidth: 1, borderColor: "#1da861", borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                                                    {!!bvc ? <>
                                                        <Image className='mb-3'
                                                            source={{ uri: bvc?.data?.uri ? bvc?.data?.uri : bvc?.url  }}
                                                            resizeMode={'contain'}
                                                            style={{ width: '100%', height: 200 }}
                                                        />
                                                        <Text style={{ color: "#1da861", position: 'absolute', bottom: 0 }} className="[font-family:'Poppins-Regular'] text-md">BVC</Text>
                                                    </> : <>
                                                        <Text style={{ color: "#1da861" }} className="[font-family:'Poppins-Regular'] text-md">Add BVC</Text>
                                                        <Icon name="plus" size={20} color="#1da861" />
                                                    </>}
                                                </Pressable>
                                            </View>



                                        </>}


                            </View>

                        </View>


                    </View>}
                </View>
            </ScrollView>
            <View className={`p-6 flex flex-row pt-4 justify-center bg-white ${Platform.OS === 'ios' ? 'pb-10' : 'pb-5'}`}>
             
                {page > 0 && <View className='w-[20%] pr-2'>
                    <TouchableOpacity
                        style={styles.shadow} className=" w-full bg-[#caf6df] p-3 rounded-[16px] "
                        onPress={() => page > 0 && setPage(page - 1)} disabled={page === 0 ? true : false}
                    >
                        <Feather name='chevron-left' size={28} color={'#1da861'}/>
        
                    </TouchableOpacity>
                </View>}

                <View className={`${page > 0 ? 'w-[80%]': 'w-[100%]'}`}>
                    <TouchableOpacity
                        style={[styles.shadow,{backgroundColor:page === 2 ? '#1da861': '#caf6df'}]} className="w-full p-3 rounded-[16px]" 
                        onPress={handleSubmit(AddEmployee)}
                    >
                        {page === 2 ? 
                            <Text className="text-lg text-white [font-family:'Poppins-Medium'] tracking-wide text-center" style={{color:'#fcfcfc'}}>
                                {route.params.id ? "Update" : "Submit"}
                            </Text>
                            : <Text className="text-lg text-white [font-family:'Poppins-Medium'] tracking-wide text-center" style={{color:'#1da861'}}>
                                Continue
                            </Text>}
                    </TouchableOpacity>
                </View>
            </View>

        </>
    );
};
 is code  mai jo adahr pan card pvc bvc hai jab unpe press ho toh photooption ki tarh  3 open dikhe like open camera ,chose files, choose gallery  inpe clik krna k baad wo camera ki image set hona ko hona gaelra sa bhi and if i choose pdf and doc wo bhi set hone ko hona