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 moodDropdownRef = useRef();


    const [gender, setGender] = useState(null);
    const [dob, setDob] = useState(null);
    const [isMarried, setIsMarried] = useState(false);
    const [compRelation, setCompRelation] = useState(null);

    const [emergencyContacts, setEmergencyContacts] = useState([]);
    const [dependents, setDependents] = useState([]);
    const [education, setEducation] = useState([]);
    const [prevEmployer, setPrevEmployer] = useState([]);

    const [joinDate, setJoinDate] = useState(null);
    const [resignDate, setResignDate] = useState(null);

    const [client, setClient] = useState(null);
    const [baseLocation, setBaseLocation] = useState(null);
    const [addresses, setAddresses] = useState([]);

    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 items = [
        { label: 'Hindi', value: 'hindi' },
        { label: 'English', value: 'english' },
        { label: 'Marathi', value: 'marathi' },
        { label: 'Kannada', value: 'kannada' },
        { label: 'Telugu', value: 'telugu' },
        { label: 'Malayalm', value: 'malayalm' },
        { label: 'Gujarati', value: 'gujarati' },
        { label: 'Punjabi', value: 'punjabi' },
    ];

    const relations = [
        { label: 'Father', value: 'father' },
        { label: 'Mother', value: 'mother' },
        { label: 'Daughter', value: 'daughter' },
        { label: 'Son', value: 'son' },
        { label: 'Husband', value: 'husband' },
        { label: 'Wife', value: 'wife' },
        { label: 'Brother', value: 'brother' },
        { label: 'Sister', value: 'sister' },
        { label: 'Grandfather', value: 'grandfather' },
        { label: 'Grandmother', value: 'grandmother' },
        { label: 'Grandson', value: 'grandson' },
        { label: 'Uncle', value: 'uncle' },
        { label: 'Aunt', value: 'aunt' },
        { label: 'Nephew', value: 'nephew' },
        { label: 'Niece', value: 'niece' },
        { label: 'Cousin', value: 'cousin' },
        { label: 'Others', value: 'others' },

    ];

    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);
            // else if (img === 'sign') setSignatureImage(fileObj);
            // else if (img === 'bank') setBankPhoto(fileObj);
        }
    };

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

                // type: "*/*", // all files
                // type: "image/*" // all images files
                // type: "audio/*" // all audio files
                // type: "application/*", // for pdf, doc and docx
                // type: "application/pdf", // .pdf
                // type: "application/msword" // .doc
                // type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" // .docx
                // type: "vnd.ms-excel" // .xls
                // type: "vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
                // type: "text/csv" // .csv
    

    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);
                // User cancelled the picker, exit any dialogs or menus and move on
            } 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 });
            // setGender(res.gender === 'male' ? 0 : res.gender === 'female' ? 1 : res.gender === 'other' ? 2 : null);
            setDob(res.dob);

            setClient(res.client);

            // let lang = []
            // res.languages.map(a => lang.push({ label: a, value: String(a).toLocaleLowerCase() }));

            // alert(JSON.stringify(lang));
            setLanguage([...res.languages]);

            // console.log(res.emergencyPhones);
            // console.log(res.uniform);

            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 })
            // setValue("nomineeRelation", res.nomineeRelation);

            // setValue("bankLinkPhone", res.bankLinkPhone);
            // setEmployee([...res.employees]);

            // setAadharCard(res.aadhar);
            // setPanCard(res.tinPan);
            // setPassbook(res.passbook);
            // setpvc(res.pvc);
            // setbvc(res.bvc);
            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 })
                    }
                })
            }
            // setThumbPhoto(res.thumbPhoto);
            // setBgvConsentPhoto(res.bgvConsentPhoto);
            // if(res.termsAndConditionPhoto) {
            //     res.termsAndConditionPhoto.name = res.termsAndConditionPhoto.originalname
            //     setTermsAndConditionPhoto(res.termsAndConditionPhoto);
            // }

            // let _selectedClient = await dispatch(fetchCounterPartyAccountById(res.client._id));
            // setSelectedClient(_selectedClient.payload);

            // setSelectedOption(res.client._id);
            // setSelected(res.client);

            // methods.setValue("baseLocation", res.baseLocation._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;
                // } 
            })
        }
    }

    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'first', title: 'CONTACT' },
        { key: 'second', title: 'FAMILY' },
        { key: 'third', title: 'ADDRESS' },
    ]);

    const FirstRoute = () => (
        <View key={1} style={{ flex: 1,height:300, backgroundColor: '#ff4081' }} >
            <Text>jhvhjvhj</Text>
        </View>
      );
      
      const SecondRoute = () => (
        <View key={2} style={{ flex: 1,height:300, backgroundColor: '#673ab7' }} />
      );

      const ThirdRoute = () => (
        <View key={3} style={{ flex: 1,height:300, backgroundColor: '#673ab7' }} />
      );
      
      const renderScene = SceneMap({
        first: FirstRoute,
        second: SecondRoute,
        third: ThirdRoute
      });

    _renderTabBar = (props) => {
        const inputRange = props.navigationState.routes.map((x, i) => i);

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

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

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

                {props.navigationState.routes.map((route, i) => {
                    //   const opacity = props.position.interpolate({
                    //     inputRange,
                    //     outputRange: inputRange.map((inputIndex) =>
                    //     inputIndex === i ? 1 : 0.5
                    //     ),
                    //   });

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

    const [index1, setIndex1] = React.useState(0);
    const [routes1] = React.useState([
        { key: 'one', title: 'EDUCATION' },
        { key: 'two', title: 'EMPLOYMENT' },
    ]);

    _renderTabBar1 = (props) => {

        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'>
            <Ionicons name="person-circle-outline" size={33} color="#888" style={{marginTop:10}}/> 
                
                <Text className=" [font-family:'Poppins-SemiBold'] text-[20px] p-3 pl-2 pb-2">
                
                {route.params.id ? 'Update Employee' : 'Add Employee'}
                </Text>
                <TouchableOpacity
                    onPress={() => navigation.goBack()}
                    style={{position: "absolute", top: 10, right: 15 ,width:35,height:35,backgroundColor:'#e2e0ec',borderRadius:25,alignItems:'center',justifyContent:'center'}}
                >
                    <Ionicons name="close" size={20} color="#888" />
                </TouchableOpacity>
            </View> */}

            <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>
                                                <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
                                                                testID={'modal'}
                                                                isVisible={signModel}
                                                                // onSwipeComplete={this.close}
                                                                swipeDirection={['up', 'left', 'right', 'down']}
                                                                style={{ justifyContent: 'flex-end', margin: 0 }}>
                                                                <ModalView onPress={() => setSignModel(false)} />
                                                            </Modal> */}

                                                            <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'}`}>
                {/* <View className='w-[20%] pr-2 '>
                    <TouchableOpacity
                        style={styles.shadow} className=" w-full bg-teal-400 p-3 rounded-[16px] "
                        onPress={AddEmployee}
                    >
                        <Text className="text-lg text-white [font-family:'Poppins-SemiBold'] text-center">
                            a</Text>
                    </TouchableOpacity>
                </View> */}

                {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'}/>
                        {/* <Text className="text-lg text-white [font-family:'Poppins-SemiBold'] text-center">
                            Previous</Text> */}
                    </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>

        </>
    );
};

const styles = StyleSheet.create({
    shadow: {
        // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        // box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        // boxShadow: 'rgba(0, 0, 0, 0.35) 0px 5px 15px',
        shadowOffset: { height: 8, width: 0 },
        shadowColor: 'rgba(149, 157, 165, 0.2)',
        shadowOpacity: 0.3,
        elevation: 3,
        zIndex: 999,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        shadowOffset: { height: 8, width: 0 },
        shadowColor: 'rgba(149, 157, 165, 0.2)',
        shadowOpacity: 0.3,
        elevation: 3,
        zIndex: 999,
    },
    searchBar: {
        borderWidth: 1,
        height: 40
    },
    container2: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        textAlign: 'center',
        paddingTop: 15
        // verticalAlign: 'middle'
    },
    image: {
        width: 90,
        height: 90,
        shadowOffset: { height: 8, width: 0 },
        shadowColor: 'rgba(149, 157, 165, 0.2)',
        shadowOpacity: 0.3,
        elevation: 3,
    },
    row: {
        alignItems: 'center',
        // borderColor: '#dcdcdc',
        backgroundColor: '#fff',
        // borderBottomWidth: 1,
        padding: 10,
        justifyContent: 'space-between',
    },
    pic: {
        borderRadius: 25,
        width: 50,
        height: 50,
        borderColor: 'grey',
        borderWidth: 0.1
    },
    profilePic: {
        borderRadius: 40,
        width: 80,
        height: 80,
        borderColor: 'grey',
        borderWidth: 0.1
    },
    nameContainer: {
        justifyContent: 'space-between',
    },
    nameTxt: {
        // marginLeft: 5,
        fontWeight: '600',
        color: '#222',
        fontSize: 16,
    },
    mblTxt: {
        fontWeight: '200',
        color: '#777',
        fontSize: 13,
    },
    end: {
        alignItems: 'center',
    },
    time: {
        fontWeight: '400',
        color: '#666',
        fontSize: 14,
    },
    icon: {
        height: 28,
        width: 28,
    },
    dropdown2MenuStyle: {
        backgroundColor: '#f5f5f5',
        borderRadius: 12,
        width: 'auto',
        left: '20%',
        // right:20,
        marginTop: -70
    },
    dropdown2ItemStyle: {
        width: '100%',
        flexDirection: 'row',
        paddingHorizontal: 15,
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 9.5,
        borderBottomWidth: 0.5,
        borderBottomColor: '#d7d7d7',
        // borderTopWidth: 0.5,
        // borderTopColor: '#d7d7d7',
    },
    dropdown2ItemTxtStyle: {
        flex: 1,
        fontSize: 14,
        fontWeight: 'ultralight !important'
    },
    tabBar: {
        flexDirection: 'row',
        width: '100%',
        paddingRight: '25%'
    },
    tabItem: {
        flex: 1,
        alignItems: 'center',
        padding: 16,
    },
    signatureContainer: {
        marginTop: 80,
    },
    signaturePreview: {
        marginTop: 150,
        marginBottom: 92,
        alignItems: 'center',
        top: 80
    },
});

// text-[#34c2c1]
is code mai photooption k selct dropdown mujhe adharr pan pvc bvc passsbook mai den ahai  jisma press krna pa  ye option dekhnge nad image set honge