import React, { useState, useEffect, memo } from 'react';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import { globalStyles, customStyles, GetPageTheme } from "../styles/Global";
import { StatusBar, Image, TextInput, View, Text, ScrollView, TouchableOpacity, TouchableHighlight, Platform, DeviceEventEmitter, PermissionsAndroid, FlatList, Keyboard, StyleSheet, Modal } from 'react-native';
import { ReactReduxContext, connect, useSelector, useDispatch } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../reducers/contextProvider';
import SQLite from 'react-native-sqlite-2';
import { notify } from '../components/notify';
import moment from 'moment';
import { getDownloadJson, AddStore, checkRange, UploadData2, UploadData, UpdateStoreStatus, getKPIS, marktext1, marktext2, UploadFormData, validateNumber, ValidateEmail, restore_ImageWithMetaDataGst } from '../controller/functions';
import { get_item, set_item, clear_item } from '../components/localStorage';
import { version, sloganline, appname, testurl, db, AppVersion, common_ImagePath, kycImagePath } from '../constants/constants';
import CustomHeader from '../components/customHeader';
import { Card } from 'react-native-paper';
import { AntDesign, Entypo, EvilIcons, Feather, FontAwesome, Fontisto, Ionicons, MaterialCommunityIcons } from '../components/icons';
import CustomLoader from '../components/CustomLoader';
import LinearGradient from 'react-native-linear-gradient';
import CustomModal from '../components/CustomModal';
import { AppTables } from '../constants/tableConstants';
import { _checkLocationPermission } from '../components/geolocation';
import * as RNFS from 'react-native-fs';

import CameraImg2 from '../assets/performics/camera_icon.svg';
import CameraImg3 from '../assets/performics/camera_tick.svg';
import CustomCamera from '../components/Camera';
import GradientButton from '../components/gradientButton';
import CameraImg from '../assets/performics/camera_front_image.svg'
import ImageViewer from 'react-native-image-zoom-viewer';



function StoreProfileKyc(props) {
  const route = useRoute();
  const ST = props.StaticText || {};
  // get all theme styles acc to current theme set 
  const PageTheme = GetPageTheme(props.DarkMode, route.name);
  const customStyle = customStyles(props.DarkMode, route.name);

  const [loaderTitle, setLoaderTitle] = useState("Loading...");
  const [processing, setProcessing] = useState(false);
  const [rerenderdata, setrerenderdata] = useState(0);
  const [isAdhocScreen, setIsAdhocScreen] = useState(false);
  const [isBeatPlan, setIsBeatPlan] = useState(false);
  const [storeData, setStoreData] = useState({});



  const [AllFormData, setAllFormData] = useState({});
  const [showCamera, setShowCamera] = useState(false);
  const [showImg, setShowImg] = useState(false);
  const [ImgURI, setImgURI] = useState("");
  const [StoreImage, setStoreImage] = useState('');
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  const [IsEnableSubmit, setIsEnableSubmit] = useState(false);

  const [isNonMerchan, setIsNonMerchan] = useState(false);
  const [isNonProg, setIsNonProg] = useState(false);
  const [StoreImgPath, setStoreImgPath] = useState('');
  const [SelectedImg, setSelectedImg] = useState('');
  const [rerenderdata2, setrerenderdata2] = useState(0);
  const [showModal, setShowModal] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);

  let d1 = new Date();
  let today = moment(d1).format('MM/DD/YYYY');

  useEffect(() => {
    setLoaderTitle(ST.Loading + '...')


    let params = props.route.params ? props.route.params : {};
    let storeData1 = params.storeData || {};
    // console.log('storeData1:',storeData1);
    let isAdhoc = params.isAdhoc || false;
    let isBeat = params.isBeat != null ? params.isBeat : false;
    let isNonMerchan1 = params.isNonMerchans != null ? params.isNonMerchans : false;
    let isNonProgam = params.isNonProgs != null ? params.isNonProgs : false;
    setIsAdhocScreen(isAdhoc);
    setIsBeatPlan(isBeat);
    setIsNonMerchan(isNonMerchan1);
    setIsNonProg(isNonProgam)
    setStoreData(storeData1);

    let st2 = Object.assign({ 'test': '1' }, storeData1);
    console.log("gstdetails:", st2)
    setAllFormData(st2); //Assigning current Store Data to FormData to be filled or changed

    // validateForm(true,storeData1);


    const onImageCapturedSubs = DeviceEventEmitter.addListener('onImageCaptured', (imgData) => { getImage(imgData) });
    return function cleanup() {
      onImageCapturedSubs.remove();
    };


  }, [])


  async function validateForm(isCheck = false, storeData1 = {}) {
    let isValid = true;
    let data = isCheck == true ? storeData1 : AllFormData;
    let { StoreName, Address, Location, Pincode, ContactPerson, Phone, Mobile, GSTno, GSTImage, Email } = data;


    if ((GSTno == '' || GSTno == null) && (GSTImage == '' || GSTImage == null)) {
      console.log("gstnumberai--", GSTno)
      isValid = false;
      notify('Please provide either GST No. or GST Image.', 'SHORT');
    }

    else if (GSTno && GSTno.trim().length < 15) {
      isValid = false;
      notify('GST No. must be at least 15 characters long.', 'SHORT')

    }

    else if (GSTno) {
      const trimmedGST = GSTno.trim().toUpperCase();
      const gstRegex = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;

      if (trimmedGST.length !== 15) {
        isValid = false;
        notify('GST No. must be exactly 15 characters long.', 'SHORT');
      }
    }
    else {
      isValid = true; // Valid if either GSTno or ImageName is present
    }

    if (isCheck == true && isValid == false) {
      setIsEnableSubmit(true);
    }
    return isValid;
  }


  const onStoreDataChange = (value, key, type) => {
    setAllFormData((prevState) => {
      console.log(`onStoreDataChange - Updating ${key} with value:`, value);
      console.log("Previous AllFormData in onStoreDataChange:", prevState);
      const updatedState = {
        ...prevState,
        [key]: value,
      };
      console.log("Updated AllFormData in onStoreDataChange:", updatedState);
      return updatedState;
    });
  };


  const onSubmitData = async () => {
    Keyboard.dismiss();
    console.log("Allformdataa:", AllFormData)
    console.log("IsEnableSubmit:", IsEnableSubmit)
    // if(IsEnableSubmit){   
    let isValid = await validateForm();
    if (!isValid) {
      return;
    }
    if (isValid) {

      setLoaderTitle('Updating Store Profile!...');
      setProcessing(true);


      let val = ` ('${storeData.StoreId}', '${AllFormData.StoreName}','${AllFormData.Address}','${AllFormData.GSTno}','${AllFormData.GSTImage}','${AllFormData.ContactPerson}','${AllFormData.Phone}', '${AllFormData.Mobile}','${AllFormData.Location}','${AllFormData.Pincode}','${AllFormData.Email}','${today}', '${today}')`;
      let q = `INSERT INTO ${AppTables.STORE_PROFILE_KYC}(STORE_ID ,STORE_NAME ,ADDRESS ,GSTNO,IMAGE,CONTACT_PERSON ,PHONE ,MOBILE ,LOCATION ,PINCODE , EMAIL ,VISIT_DATE ,ADDED_DATE)
          values ${val}`;
      db.transaction(function (txn) {
        txn.executeSql(`Delete from ${AppTables.STORE_PROFILE_KYC} where STORE_ID='${storeData.StoreId}' and VISIT_DATE='${today}'`, [], function (txn1, txnres) {

          txn.executeSql(q, [], function (txn1, txnres) {
            console.log('Store Profile is added');


            // update data in storeList
            let tbname = (isBeatPlan == true ? 'JourneyPlan_RouteWise' : (isAdhocScreen == true ? 'Adhoc_JourneyPlan' : (isNonMerchan == true ? 'NonMerchandising_JourneyPlan' : isNonProg == true ? 'NonProgram_JourneyPlan' : 'Mapping_JourneyPlan')))
            let update_val = `StoreName='${AllFormData.StoreName}',Address='${AllFormData.Address}',GSTno='${AllFormData.GSTno}',GSTImage='${AllFormData.GSTImage}',ContactPerson='${AllFormData.ContactPerson}',Phone='${AllFormData.Phone}',Mobile='${AllFormData.Mobile}',Location='${AllFormData.Location}',Pincode='${AllFormData.Pincode}',Email='${AllFormData.Email}' `;
            let q2 = `Update ${tbname} set  ${update_val} where StoreId='${storeData.StoreId}' and VisitDate='${today}' `;
            txn.executeSql(q2, [], function (txn1, txnres) {

              console.log('Store Profile Kyc is updated');
              setProcessing(false);
              gotoDailyMenu(true);

            }, function (Etxn, err) {
              console.log('err:', err);
              notify('Cannot Add Store Profile Kyc!');
              setProcessing(false);
            });
          }, function (Etxn, err) {
            console.log('err:', err);
            notify('Cannot Add Store Profile Kyc!');
            setProcessing(false);
          });
        }, function (Etxn, err) {
          console.log('err:', err);
          notify('Cannot Add Store Profile!');
          setProcessing(false);
        });

      });

    }
    //  }
    else {
      gotoDailyMenu();

    }
  }

  async function openCamera() {
    // setShowCamera(true);
    props.navigation.navigate('CameraScreen', { 'getImage': getImage, 'cameraType': (props.CheckinOpenBackCamera ? 'back' : 'back'), 'CheckInCameraGallery': props.CheckInCameraGallery, storeData: storeData, enableCameraFlip: (props.CheckInSwitchingCamera ? true : false) })
  }

  async function getImage(imgdata) {
    try {
      if (typeof imgdata === 'object' && imgdata.errorCode === 'camera_unavailable') {
        notify(ST.Cameraunavailable);
        return;
      }

      if (typeof imgdata === 'object' && imgdata.uri != null) {
        const img = imgdata;
        const storeDataDetail = imgdata.storeData || {};
        const imgurl = img.uri,
          imgWidth = img.width,
          imgHeight = img.ExtendedHeight;
        const isImgFromGallery = img.fromGallery != null ? img.fromGallery : false;
        const picture_clickedd = isImgFromGallery ? img.datetime : new Date();
        const picture_clicked_time = moment(picture_clickedd).format('MM-DD-YYYY HH:mm:ss');
        const picture_clicked_time_for_pic_name = moment(picture_clickedd).format('MMDDYYYY_HHmmss');

        console.log("time", picture_clicked_time);
        console.log("time1", picture_clicked_time_for_pic_name);
        let calculate_tym_date_for_filename = picture_clicked_time_for_pic_name;
        let calculate_tym_date_over_img = picture_clicked_time;

        const filename = storeDataDetail.StoreId + "_" + (props.UserId || '') + '_KycStoreImg-' + calculate_tym_date_for_filename + '.jpg';
        console.log(filename, "file_name", "Store_data", storeDataDetail);

        const mark_text1 = calculate_tym_date_over_img;
        const mark_text2 =
          'Store Id : ' + storeDataDetail?.StoreId +
          ' User Id:' + props.UserId + ' | Image Type: Kyc Store Img' + ' | Date:' + calculate_tym_date_over_img;
        console.log(mark_text1 + "\n" + mark_text2, "mark_text2");

        setStoreImage(filename);

        const imagePath = `${kycImagePath}${filename}`;
        console.log("checkin imgurl:", imagePath, imgurl);

        await RNFS.copyFile(imgurl, imagePath);

        // Render data with clicked image
        const uri = 'file://' + imagePath;
        setStoreImgPath(uri);
        setSelectedImg(uri);

        // Update AllFormData while preserving GSTno
        setAllFormData((prevState) => {
          console.log("Previous AllFormData:", prevState); // Debug previous state
          return {
            ...prevState,
            GSTImage: filename,
            GSTImagePath: uri,
            GSTno: prevState.GSTno || '', // Ensure GSTno is preserved
          };
        });

        // onStoreDataChange(uri, 'GSTImage'); // Call after updating AllFormData

        // Add metadata, resize image, and restore to imagePath
        const restore_data = {
          destFilePath: imagePath,
          imgurl: imgurl,
          imgWidth,
          imgHeight,
          mark_text1,
          mark_text2,
        };
        const is_restored = await restore_ImageWithMetaDataGst(restore_data, imgdata);
        console.log("image restored:", is_restored);

        setrerenderdata2(!rerenderdata2);
      }
    } catch (err) {
      console.log('ERROR: image file write failed!!!', err);
      console.log(err.message, err.code);
      notify("Error processing image!");
    }
  }

  const gotoDailyMenu = (updated = false) => {
    let data = updated ? AllFormData : storeData;

    let s_screen = "StoreDailyMenu"
    if (props.ShowStoreChecklist == true) {
      s_screen = "StoreChecklist";
    } else if (props.ShowReportAfterCheckIn == true) {
      s_screen = "ReportsMenu";
    }
    props.navigation.replace(s_screen, { storeData: data, 'isAdhoc': isAdhocScreen, 'isBeat': isBeatPlan, "isNonMerchans": isNonMerchan, isNonProgs: isNonProg , '_fromStoreWise': true});
  }

  function _OpenCaptureImage_Modal(img) {
    const isImageCap = (img != '' || img != null) ? true : false;
    let camera2Label = 'test';
    return (
      <CustomModal
        style={customStyle.PromoImgModal}
        title={ST.CheckinImage}
        // message={camera2Label}
        titleStyle={customStyle.PromoImgModal_title}
        messageStyle={customStyle.PromoImgModal_subtitle}
        showModal={showModal}
      >
        {
          isImageCap &&
          <View style={customStyle.PromoImgModalCon}>
            <View style={customStyle.PromoImgModal_ImgWrap}>
              <Image style={[customStyle.PromoImgModal_Img, (Platform.OS == 'ios' ? customStyle.android_flipIMageView : {})]} source={{ uri: SelectedImg }} />
            </View>
            <TouchableOpacity style={customStyle.PromoImgModal_CameraSmall} onPress={() => { openCamera() }}>
              <MaterialCommunityIcons name='camera-retake' size={30} color={PageTheme.$primary_color} />
            </TouchableOpacity>

            {
              <TouchableOpacity style={customStyle.PromoImgModal_Cancel_btn} onPress={() => { cancelImage(false) }}>
                <Text style={customStyle.PromoImgModal_Cancel_btnText}>{ST.Close}</Text>
              </TouchableOpacity>
            }
          </View>
        }
      </CustomModal>
    )
  }

  function _render_captureImage() {

    const isImageAvlbl = StoreImage != '' && StoreImage != null && StoreImgPath != '' && StoreImgPath != null;

    return (
      <View style={[customStyle.gtag_sImageWrap, { bottom: -40 }]}>
        <View style={customStyle.gtag_sImagelbl}>
          <TouchableOpacity style={[customStyle.gtag_sImage_View]} onPress={() => { isImageAvlbl ? OpenImgModal(StoreImgPath) : openCamera() }}>
            {!isImageAvlbl && <CameraImg width={80} height={80} />}
            {isImageAvlbl && <CameraImg3 style={{ marginLeft: 5 }} width={80} height={80} />}
          </TouchableOpacity>
          {/* {isImageAvlbl && <Image style={[customStyle.gTag_Image,(Platform.OS=='ios' ?customStyle.android_flipIMageView:{})]} source={{uri:StoreImgPath}}/>}     */}
          <Text style={[customStyle.gtag_sImagelblText, { marginTop: 0 }]}>{ST.ClickStoreFrontImage}</Text>
        </View>

      </View>
    );
  }

  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS == 'ios' ? true : false)}>
      {processing && <CustomLoader fullHeight={true} title={loaderTitle} />}
      <CustomHeader {...props} title={"Store Profile Kyc"} />
      {_OpenCaptureImage_Modal()}
      {_render_captureImage()}
      <CustomCamera cameraType={'back'} BottomText={'Store Name:' + storeData.StoreName + ' | Store Id:' + storeData.StoreId + ' | User Id:' + storeData.EmpId + ' | Image Type: Store Profile'} onImageCaptured={(imgData) => { setShowCamera(false); getImage(imgData); onStoreDataChange(imgData, 'GSTImage', 'image'); }} showCamera={showCamera} onHideCamera={() => { setShowCamera(false); }} />
      <LinearGradient colors={[PageTheme.$gradient1, PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={customStyle.roundScrollWrapper}>
        <View style={[customStyle.pageContentWrapper]}>
          <View style={[customStyle.STp_hdrParent]}>
            <View style={[customStyle.STp_Hdr]}>
              <Text style={customStyle.STp_HdrText}>Store Profile KYC</Text>
            </View>
          </View>
          <ScrollView
            style={customStyle.STp_ContentOuter}
            contentContainerStyle={customStyle.STp_ContentInner}
          >
            {rerenderdata == rerenderdata &&
              <View style={[customStyle.STp_Card]}>
                <View style={[customStyle.STp_card_outer,]}>
                  <View style={[customStyle.STp_storeDetails,]}>
                    <View style={customStyle.storel_code}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeBorder, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{ST.StoreId + ':'}</Text>
                        <Text style={customStyle.storel_codeText}>{storeData.StoreId}</Text>
                      </View>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{ST.StoreType + ':'}</Text>
                        <Text style={[customStyle.storel_codeText, { width: '50%' }]}>{storeData.StoreType}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{ST.StoreCode + ':'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{storeData.StoreCode == "undefined" ? "" : storeData.StoreCode}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{'City Name:'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{storeData.CityName}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{'Tax Type:'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{AllFormData.TaxType}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{'Chain Name:'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{AllFormData.ChainName}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{'Channel Id:'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{AllFormData.ChannelId}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{'Store Category:'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{AllFormData.StoreCategory}</Text>
                      </View>
                    </View>
                    <View style={[customStyle.storel_code, customStyle.storel_codeBorderTop, customStyle.mt10]}>
                      <View style={[customStyle.storel_codeCon, customStyle.storel_codeConAddr]}>
                        <Text style={customStyle.storel_codeLbl}>{'Store Class:'}</Text>
                        <Text style={[customStyle.storel_codeText, customStyle.storel_codeTextAddr]}>{AllFormData.StoreClass}</Text>
                      </View>
                    </View>

                  </View>
                  <View style={[customStyle.STp_form]}>

                    <View style={customStyle.AddStockM_row} >
                      <Text style={customStyle.AddStockM_label}>{"GST No"}</Text>
                      <View style={customStyle.AddStockM_col} >
                        <TextInput
                          style={[customStyle.Gst_InputStyle]}
                          placeholder=""
                          autoComplete='off'
                          placeholderTextColor={PageTheme.$placeholder_color}
                          value={(AllFormData.GSTno || '')}
                          onChangeText={(val) => {
                            const cleanVal = val.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
                            onStoreDataChange(cleanVal, 'GSTno', 'text')
                          }}
                          autoCapitalize="characters"
                          maxLength={15}
                        />
                      </View>
                    </View>


                    <View style={customStyle.AddStockM_row} >
                      <Text style={customStyle.AddStockM_label}>{"GST Image"}</Text>
                      <TouchableOpacity onPress={() => { openCamera() }}>
    
                        {AllFormData.GSTImage ? <CameraImg3 width={50} height={50} /> : <CameraImg2 width={50} height={50} />
}

                      </TouchableOpacity>

                      {/* ✅ Show selected image if available */}
                      {console.log("allformdataaaa:", AllFormData)}
                      {AllFormData.GSTImage && (
                        <TouchableOpacity onPress={() => setModalVisible(true)}>
                          <Image
                            //source={{ uri: AllFormData.GSTImage}}
                            source={{ uri: `file:///data/user/0/com.performics/files/PerformicsAllImages/KYCImages/${AllFormData.GSTImage}` }}
                            style={{
                              width: 80,
                              height: 80,
                              marginLeft: 5,
                              borderRadius: 12,
                              borderWidth: 1,           // Optional: add a border
                              marginTop: 10,
                              borderColor: '#ccc',      // Optional: light gray border
                              backgroundColor: '#f8f8f8', // Optional: light bg for smooth loading
                            }}
                            resizeMode="cover"
                          />
                        </TouchableOpacity>
                      )}


                    </View>

                  </View>
                </View>
              </View>
            }
          </ScrollView>

          <View style={customStyle.SChk_BtnWrapFlex}>

            <View style={[customStyle.SChk_BtnCol, customStyle.SChk_BtnGst]}>
              <View style={[customStyle.SChk_Btn]}>
                <GradientButton {...props} title={ST.Save} onPress={() => { onSubmitData() }} style={customStyle.SChk_BtnSave} />
              </View>
            </View>
          </View>
        </View>
      </LinearGradient>
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}>
        <View style={styles.modalContainer}>
          {AllFormData.GSTImage ? (
            <ImageViewer
              imageUrls={[{ url: `file:///data/user/0/com.performics/files/PerformicsAllImages/KYCImages/${AllFormData.GSTImage}` }]}
              enableSwipeDown
              onSwipeDown={() => setModalVisible(false)}
              enableImageZoom
              backgroundColor="transparent"
              // loadingRender={() => <ActivityIndicator size="large" color="#fff" />}
              onError={(error) => console.log("ImageViewer error:", error)}
            />
          ) : (
            <Text style={{ color: '#fff', textAlign: 'center', fontSize: 16 }}>
              Image not available
            </Text>
          )}
          <TouchableHighlight
            style={styles.closeButton}
            onPress={() => setModalVisible(false)}
          >

            <Text style={styles.closeButtonText}>Close</Text>
          </TouchableHighlight>
        </View>
      </Modal>
    </Container>
  );
}


const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.8)', // Semi-transparent black background
  },
  closeButton: {
    position: 'absolute',
    top: 40,
    right: 20,
    backgroundColor: '#fff',
    padding: 10,
    borderRadius: 20,
    zIndex: 10, // Ensure button is above ImageViewer
  },
  closeButtonText: {
    fontSize: 16,
    color: '#000',
    fontWeight: 'bold',
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(StoreProfileKyc);