import React, { useState, useEffect, useRef } 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, Platform, PermissionsAndroid, FlatList, Alert, Animated, AppState, Keyboard } 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, getKPIFields, marktext1, marktext2, resizeImage, restore_ImageWithMetaData, validateNumber } from '../controller/functions';
import { get_item, set_item, clear_item } from '../components/localStorage';
import { version, sloganline, appname, testurl, db, colors_Arr, common_ImagePath, ImageFolderPath } from '../constants/constants';
import CustomHeader from '../components/customHeader';
import { Card, Menu, Switch } from 'react-native-paper';
import { AntDesign, Entypo, FontAwesome, Fontisto, MaterialCommunityIcons } from '../components/icons';
import { stat } from 'react-native-fs';
import CustomLoader from '../components/CustomLoader';
import LinearGradient from 'react-native-linear-gradient';
import { AppTables } from '../constants/tableConstants';
import { SvgXml } from 'react-native-svg';
import { launchCamera, launchImageLibrary, CameraOptions } from 'react-native-image-picker';
import * as RNFS from 'react-native-fs';
import GradientButton from '../components/gradientButton';

import cameraImg from '../assets/performics/camera_front_image.svg'
import addImg from '../assets/performics/add_image.svg';
import CustomModal from '../components/CustomModal';
import { Q_getpaidvisibility } from '../constants/ConstantQueries';
import { Picker } from '@react-native-picker/picker';
import { ConfirmSaveAlert } from '../components/alert';
import ModalSelector from 'react-native-modal-selector'
import { CustomPicker } from '../components/CustomPicker';
import CustomCamera from '../components/Camera';
import DateTimePicker from '@react-native-community/datetimepicker';

import CameraImg3 from '../assets/performics/camera_tick.svg';
import CameraImg2 from '../assets/performics/camera_icon.svg';
import CameraImg4 from '../assets/performics/camera_asterisk.svg';
import CameraImg5 from '../assets/image/astrickcamera.svg';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { getMethodName, METHODS } from '../constants/methodNames';

function AddedStoreList(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 animatedChoice = useRef(new Animated.Value(0)).current;

    const [processing, setProcessing] = useState(true);
    const [loaderTitle, setLoaderTitle] = useState();
    const [isAdhocScreen, setIsAdhocScreen] = useState(false);
    const [storeData, setStoreData] = useState({});
    const [StoreCameraAllow, setStoreCameraAllow] = useState(true);

    const [ShowDatePicker1, setShowDatePicker1] = useState(false);
    const [ShowDatePicker, setShowDatePicker] = useState(false);
    const [currentMenu, setCurrentMenu] = useState({});
    const [brandData, setBrandData] = useState([]);
    const [rerenderdata, setrerenderdata] = useState(0);
    const [rerenderdata2, setrerenderdata2] = useState(0);

    const [AddVisibility, setAddVisibility] = useState([]);
    const [AddVisFormData, setAddVisFormData] = useState({ AssertCount: 1 });
    const [isAddVisPresent, setIsAddVisPresent] = useState(0);
    const [showAlert, setShowAlert] = useState(false);
    const [Categories, setCategories] = useState([]);
    const [SubCategories, setSubCategories] = useState([]);
    const [Brands, setBrands] = useState([]);
    const [DisplayList, setDisplayList] = useState([]);
    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
    const [showCamera, setShowCamera] = useState(false);
    const [clickImageType, setClickImageType] = useState('1');
    const [toRemoveId, setToRemoveId] = useState('');
    const [toRemoveItem, setToRemoveItem] = useState({});
    const [showRemoveConfirm_M, setshowRemoveConfirm_M] = useState(false);
    const [showRAllC_M, setShowRAllC_M] = useState(false);
    const [KPIFields, setKPIFields] = useState([]);
    const [dateValue, setDateValue] = useState('');
    const [FromDate, setFromDate] = useState('');
    const [FromDate2, setFromDate2] = useState("");
    const [FromDateObj, setFromDateObj] = useState({});

    const [ToDate, setToDate] = useState('');
    const [ToDate2, setToDate2] = useState(new Date());

    const [SelectedImg, setSelectedImg] = useState('');
    const [showModal, setShowModal] = useState(false);
    const [reCapImgModalObj, setReCapImgModalObj] = useState({});
    const [showImageSaveOp, setShowImageSaveOp] = useState(true);
    const [ImgMadCount, setImgMadCount] = useState({ img1: 0, img2: 0 });

    const hasUnsavedChangesRef = React.useRef(hasUnsavedChanges);
    const WindowDataRef = React.useRef(AddVisibility);
    const StoreIdRef = React.useRef(null);
    const ScreenNameRef = React.useRef('');

    const [showSwitchCamera, setShowSwitchCamera] = useState(false);


    const VisFormDataRef = React.useRef(AddVisFormData);
    const isAddVisPresentRef = React.useRef(isAddVisPresent);

    // AddVisibility,AddVisFormData,isAddVisPresent,pro

    const d1 = new Date();
    const d2 = moment(d1).format('MM/DD/YYYY');


    useEffect(() => {
        getData();
    }, [])

    async function getData() {
        try {


            setProcessing(true)
            let token = await get_item('loginToken');
            let loginInfo = await get_item('loginInfo');
            const loginDetails = JSON.parse(loginInfo);

            var data1 = { Downloadtype: "AddStore_Data", Param1: "", Param2: Platform.OS=="ios"?"iOS":"Android", username: loginDetails.UserId, empid: "" }

            const url = (props.baseurl || baseurl) + getMethodName(METHODS.DOWNLOADJSON_METHOD);
            console.log(url, data1);


            await getDownloadJson(url, data1)
                .then(async (res) => {
                    setProcessing(false);
                    console.log('res: Non_Working_Reason', res);
                    if (res.AddStore_Data != null) {
                        let QAD_arr = res.AddStore_Data || [];
                        setAddVisibility(QAD_arr)

                    }
                    else if (typeof (res) == 'object' && res.length > 0 && res[0].Result != null && res[0].Result.includes('No Data')) {
                        // Non_Working_Reason Not Found
                        // goToHome();
                    }
                })
                .catch(err => {
                    console.log('onPage Team error', err);
                });
            setProcessing(false)

        } catch (err) {
            setProcessing(false)
            console.log(err);
        }
    }


    function BgUnsavedChanges(val) {
        hasUnsavedChangesRef.current = val
        setHasUnsavedChanges(val);
    }

    function BgWindowData(val) {
        WindowDataRef.current = val
        setAddVisibility(val);
    }

    function BgAddVisFormData(val) {
        VisFormDataRef.current = val
        setAddVisFormData(val);
    }

    function BgIsAddVisPresent(val) {
        isAddVisPresentRef.current = val
        setIsAddVisPresent(val);
    }


    function cancelImage() {
        // setImage1('');
        setSelectedImg('');
        setReCapImgModalObj({})
        setShowModal(false);
    }

    async function getImage(imgdata) {
        if (typeof imgdata == 'object' && imgdata.errorCode == 'camera_unavailable') {
            notify(ST.Cameraunavailable);
        }
        else if (typeof imgdata == 'object' && imgdata.uri != null) {
            const img = imgdata;
            const imgurl = img.uri, imgWidth = img.width, imgHeight = img.ExtendedHeight;
            let isImgFromGallery = img.fromGallery != null ? img.fromGallery : false;
            let picture_clickedd = isImgFromGallery == true ? img.datetime : new Date();
            let picture_clicked_time = moment(picture_clickedd).format('MM-DD-YYYY HH:mm:ss')
            let picture_clicked_time_for_pic_name = moment(picture_clickedd).format('MMDDYYYY_HHmmss')
            ////change by jeevanp
            console.log("time", picture_clicked_time);
            console.log("time1", picture_clicked_time_for_pic_name);
            ////change by jeevanp
            let calculate_tym_date_for_filename = picture_clicked_time_for_pic_name;
            let calculate_tym_date_over_img = picture_clicked_time;
            let filename = storeData.StoreId + '_' + (props.UserId || '') + '_AddedStoreImg-' + calculate_tym_date_for_filename + '.jpg';
            ////change by jeevanp
            console.log("filename=>", filename)
            const mark_text1 = calculate_tym_date_over_img;
            const mark_text2 = 'Store Name:' + storeData.StoreName + ' | Store Id:' + storeData.StoreId + ' | User Id:' + storeData.EmpId + ' | Image Type: Add. Visibility' + ' | Date:' + calculate_tym_date_over_img;

            let addvisdata = AddVisFormData;
            let image_key = 'Image1';
            let image_path_key = 'Image1Path';
            addvisdata[image_key] = filename;

            let imagePath = `${ImageFolderPath + currentMenu.ScreenName}/${filename}`;
            RNFS.copyFile(imgurl, imagePath)
                .then(async (resn) => {
                    // render data with clicked image
                    let uri = 'file://' + imagePath;
                    addvisdata[image_path_key] = uri;
                    setSelectedImg(uri)
                    BgAddVisFormData(addvisdata)
                    BgUnsavedChanges(true)
                    setrerenderdata2(!rerenderdata2);
                    // add metdata then resize image and restored back to the imagePath
                    let restore_data = { "destFilePath": imagePath, "imgurl": imgurl, imgWidth, imgHeight, mark_text1, mark_text2 }
                    let is_restored = await restore_ImageWithMetaData(restore_data, imgdata);
                    console.log("image restored:", is_restored);
                })
                .catch(err => {
                    console.log(err.message, err.code);
                });
        }
    }

    function _OpenCaptureImage_Modal(img) {

        const isImageCap = (img != '' || img != null) ? true : false;
        // console.log("imag pop is trigger",isImageCap,showModal,img)
        let { window, splitItem, splitItemIndex, cameraType } = reCapImgModalObj
        let camera2Label = (window && window.PromoImage2Lable) || '';
        return (
            <CustomModal
                style={customStyle.PromoImgModal}
                title={"Additional Visibility Image"}
                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('1') }}>
                            <MaterialCommunityIcons name='camera-retake' size={30} color={PageTheme.$primary_color} />
                        </TouchableOpacity>

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

    async function openCamera(type = '1') {
        console.log('openCamera');
        setClickImageType(type);
        setShowCamera(true);
        // props.navigation.navigate('CameraScreen',{'getImage':getImage,'cameraType':'back'})
    }

    async function onSubmitData() {
        let isvalid = await validate();
        if (isvalid) {
            Keyboard.dismiss();
            setShowAlert(true);
        }
    }




    async function validate() {

        let isValid = true;
        if (isAddVisPresent == 1 && AddVisibility.length <= 0) {
            isValid = false;
            notify(ST.Pleaseaddfirst, 'SHORT');
        }

        console.log('isValid:', isValid);
        return isValid;
    }

    async function validateForm() {
        let isValid = true;
        let { CategoryName, CategoryId, SubCategoryName, SubCategoryId, BrandName, BrandId, DisplayName, DisplayId, AssertCount, Remark, Image1, Image1Path, FromDate, ToDate, showFromDateFlag } = AddVisFormData;

        let isFromDateIndex = KPIFields.findIndex(i => i.KPIFieldName == 'ShowFromDate');
        let isFromDateKPIObj = isFromDateIndex >= 0 ? KPIFields[isFromDateIndex] : {};
        let isFromDateEnable = isFromDateIndex >= 0 ? isFromDateKPIObj['KPIFieldEnable'] : true;

        let isToDateIndex = KPIFields.findIndex(i => i.KPIFieldName == 'ShowToDate');
        let isToDateKPIObj = isToDateIndex >= 0 ? KPIFields[isToDateIndex] : {};
        let isToDateEnable = isToDateIndex >= 0 ? isToDateKPIObj['KPIFieldEnable'] : true;

        let AddVisCameraReqI = KPIFields.findIndex(i => i.KPIFieldName == 'AddVisCameraReq');
        let AddVisCameraReqObj = AddVisCameraReqI >= 0 ? KPIFields[AddVisCameraReqI] : {};
        let AddVisCameraReq = AddVisCameraReqI >= 0 ? AddVisCameraReqObj['KPIFieldEnable'] : true;


        if ((CategoryName == '' || CategoryName == null) || (CategoryId == '' || CategoryId == null)) {
            isValid = false;
            notify(ST.PleaseSelectCategory, 'SHORT');
        }
        else if ((SubCategoryName == '' || SubCategoryName == null) || (SubCategoryId == '' || SubCategoryId == null)) {
            isValid = false;
            notify(ST.Pleaseselectsubcategory, 'SHORT');
        }
        else if ((BrandName == '' || BrandName == null) || (BrandId == '' || BrandId == null)) {
            isValid = false;
            notify(ST.Pleaseselectbrand, 'SHORT');
        }
        else if ((DisplayName == '' || DisplayName == null) || (DisplayId == '' || DisplayId == null)) {
            isValid = false;
            notify(ST.Pleaseselectdisplaytype, 'SHORT');
        } else if (AssertCount == 0) {
            isValid = false;
            notify("Please fill the Asset Count minimum 1", 'SHORT');
        }
        // else if((Remark=='' || Remark==null )){
        //     isValid=false;
        //     notify('Please enter remark','SHORT');
        // }
        else if (isFromDateEnable == true && !AddVisFormData.hasOwnProperty("FromDate") && (FromDate == '' || FromDate == null)) {
            isValid = false;
            notify('Please Select The From Date ', 'SHORT');
        } else if (isToDateEnable == true && !AddVisFormData.hasOwnProperty("ToDate") && (ToDate == '' || ToDate == null)) {
            isValid = false;
            notify('Please Select The To Date ', 'SHORT');
        }
        else if (StoreCameraAllow == true && AddVisCameraReq && (Image1 == '' || Image1 == null)) {
            isValid = false;
            notify(ST.Pleaseclickimage, 'SHORT');
        }

        console.log('isValid:', isValid);
        return isValid;
    }

    function onFormDataChange(val, key, type = '') {
        if (val != '') {
            let isValid = validateNumber(val, type);
            if (!isValid) {
                return;
            }
        }

        let data = AddVisFormData;
        data[key] = val;
        // setAddVisFormData(data);
        // setHasUnsavedChanges(true);
        BgAddVisFormData(data)
        BgUnsavedChanges(true)
        setrerenderdata(!rerenderdata);
    }

    function onselectionChange(option, keyLbl, keyVal) {
        let data = AddVisFormData;
        data[keyVal] = option.value;
        data[keyLbl] = option.label;

        CleanSelector(option, keyLbl, data)

        // setAddVisFormData(data);
        BgAddVisFormData(data)
        // setHasUnsavedChanges(true);
        BgUnsavedChanges(true)
        setrerenderdata(!rerenderdata);

    }

    function CleanSelector(option, keyLbl = '', data = {}) {

        if (keyLbl == 'CategoryName') {
            loadData(option.value, 'SubCategories');

            // clear subcategory and brand
            data['SubCategoryId'] = '';
            data['SubCategoryName'] = '';
            data['BrandId'] = '';
            data['BrandName'] = '';


            data['DisplayId'] = ''
            data['DisplayName'] = ''
            data['Remark'] = ''
            data['Image1Path'] = ''

            setToDate('');
            setToDate2("");
            // setToDate2(new Date(null));

            setFromDate('');
            setFromDate2('');
            // data['FromDate']='';
        }
        else if (keyLbl == 'SubCategoryName') {
            loadData(option.value, 'Brands');

            // clear brand
            data['BrandId'] = '';
            data['BrandName'] = '';

            data['DisplayId'] = ''
            data['DisplayName'] = ''

            data['Image1Path'] = ''

            data['Remark'] = ''

            setToDate('');
            setToDate2("")

            setFromDate('');
            setFromDate2('');
        } else if (keyLbl == 'BrandName') {

            // clear brand

            data['DisplayId'] = ''
            data['DisplayName'] = ''

            data['Image1Path'] = ''

            data['Remark'] = ''

            setToDate('');
            setToDate2("")

            setFromDate('');
            setFromDate2('');
        } else if (keyLbl == 'DisplayName') {

            // clear brand

            data['Image1Path'] = ''

            data['Remark'] = ''

            setToDate('');
            setToDate2("")

            setFromDate('');
            setFromDate2('');;
        }

    }

    function CleanSelectorYes() {
        let data = AddVisFormData;

        // clear subcategory and brand
        data['SubCategoryId'] = '';
        data['SubCategoryName'] = '';
        data['BrandId'] = '';
        data['BrandName'] = '';


        data['DisplayId'] = ''
        data['DisplayName'] = ''
        data['Remark'] = ''
        data['Image1Path'] = ''

        setToDate('');
        setToDate2("")

        setFromDate('');
        setFromDate2('');
        BgAddVisFormData(data)
        // data['FromDate']='';


    }
    async function loadData(qId, type) {
        try {
            await db.transaction(async function (txn) {
                let q = '';
                if (type == 'SubCategories') q = `Select Distinct p.SubCategoryId,p.SubCategoryName from Product_Master p where (p.CategoryId='${qId}' or p.CategoryId= ${qId}) and (p.IsCompetitor='0' or p.IsCompetitor=0) order by p.SubCategorySequence`;
                else if (type == 'Brands') q = `Select Distinct p.BrandName,p.BrandId from Product_Master p Where (p.SubCategoryId='${qId}' or p.SubCategoryId= ${qId}) and (p.IsCompetitor='0' or p.IsCompetitor=0) order by p.BrandSequence`;

                await txn.executeSql(q, [], async function (txn2, txnres2) {
                    // console.log('rowcount:,',type,':',txnres2.rows.length);
                    if (txnres2.rows.length > 0) {
                        let arr = [];
                        for (var i = 0; i < txnres2.rows.length; i++) {
                            let data = txnres2.rows.item(i);
                            arr.push(data);
                            if (i == txnres2.rows.length - 1) {
                                if (type == 'SubCategories') setSubCategories(arr);
                                else if (type == 'Brands') setBrands(arr);
                            }
                        }
                    }
                }, function (txnE, txnerr) { console.log(txnerr); },);

            });
        } catch (err) {
            console.log(err);
        }
    }



    function onChoiceSelect(val, key) {
        if (val == 0 && AddVisibility.length > 0) {
            setShowRAllC_M(true);
            return;
        }
        var val1 = val == 1 ? 1 : 0;
        if (animatedChoice != null) {
            Animated.timing(animatedChoice, {
                toValue: val1,
                duration: 400,
                useNativeDriver: false,
            }).start();
        }
        // setIsAddVisPresent(val);
        // setHasUnsavedChanges(true);
        if (val == 0) {
            CleanSelectorYes()
        }
        BgIsAddVisPresent(val);
        BgUnsavedChanges(true)
        if (val == 0) {
            // setAddVisibility([]);
            // setAddVisFormData({});
            BgWindowData([])
            BgAddVisFormData({})
        }
    }

    function onConfirmRemoveAll() {
        // Remove all data 
        if (animatedChoice != null) {
            Animated.timing(animatedChoice, {
                toValue: 0,
                duration: 400,
                useNativeDriver: false,
            }).start();
        }
        // setIsAddVisPresent(0);
        // setHasUnsavedChanges(true);
        // setAddVisibility([]);
        // setAddVisFormData({});
        BgIsAddVisPresent(0);
        BgUnsavedChanges(true)
        BgWindowData([])
        BgAddVisFormData({})
        setShowRAllC_M(false);
    }

    function onSaveCancel() {
        setShowAlert(false);
    }


    function showRemoveConfirm(item, index) {
        // setToRemoveId(index);
        // setToRemoveItem(item);
        // setshowRemoveConfirm_M(true);
        if (item.keyId > 0) {
            setToRemoveId(item.keyId);
            setToRemoveItem(item);
            setshowRemoveConfirm_M(true);
        }
        else {
            setToRemoveId(index);
            setToRemoveItem(item);
            setshowRemoveConfirm_M(true);
        }
    }


    async function Remove_AddVis() {
        let { StoreId, ChainId, StateId, StoreTypeId } = storeData;
        let { MenuId } = currentMenu;

        db.transaction(async function (txn) {
            let index = toRemoveId;
            let item = toRemoveItem;
            let arr = AddVisibility;
            if (item.keyId != null && item.keyId != 'undefined' && index > 0) {
                console.log("check-keyId-", index)
                let deleteQuery = `DELETE FROM ${AppTables.ADDITIONAL_VISIBILITY} WHERE STORE_ID='${StoreId}' and VISIT_DATE='${d2}' AND KEY_ID='${index}' `;

                txn.executeSql(deleteQuery, [], function (txn3, txnres) {
                    console.log('AdditionalVisibilty data deleted', item.keyId, +"" + index);
                    let updatedVisibility = AddVisibility.filter(item => item.keyId !== index);
                    setAddVisibility(updatedVisibility);
                    setHasUnsavedChanges(true);
                    notify('AdditionalVisibilty removed successfully', 'LONG');
                    setrerenderdata(!rerenderdata);
                    setToRemoveId('');
                    setToRemoveItem({});
                    setshowRemoveConfirm_M(false);

                }, function (txnE, txnerr) {
                    console.log('Error deleting survey data:', txnerr);
                });

            }
            else {
                let index = toRemoveId
                let item = toRemoveItem;
                let arr = AddVisibility;
                console.log('toRemoveId:', index);
                if (index >= 0 && index < arr.length) {
                    arr.splice(index, 1);
                    setAddVisibility(arr);
                    setHasUnsavedChanges(true);
                    notify('AdditionalVisibilty removed successfully', 'LONG')
                    setrerenderdata(!rerenderdata);
                }
                else {
                    notify('Cannot remove! AdditionalVisibilty not found', 'LONG')
                }
                setToRemoveId('');
                setToRemoveItem({});
                setshowRemoveConfirm_M(false);
            }

        });
    }


    function _render_addVisFormTop() {


        return (
            <View style={[customStyle.addvisCon]}>

                {
                    <ScrollView contentContainerStyle={customStyle.addVisScrollCon} style={customStyle.addVisScroll23}>

                        <View style={customStyle.addVis_list}>
                            <View style={customStyle.addVis_listInner}>
                                {
                                    AddVisibility.length > 0 &&
                                    AddVisibility.map((item, index) => {
                                        console.log(item);
                                        return (
                                            <View key={index} style={customStyle.addVis_listItem}>
                                                <View style={customStyle.addVis_listI_row2}>
                                                    <View style={[false ? customStyle.addVis_listIcol1 : customStyle.addVis_listIcol100]}>
                                                        <View style={customStyle.addVis_listI_row}>
                                                            <Text style={customStyle.addVis_listI_Label}>{'Store ID :'}</Text>
                                                            <Text style={customStyle.addVis_listI_Val}>{item.StoreId}</Text>
                                                        </View>
                                                        <View style={customStyle.addVis_listI_row}>
                                                            <Text style={customStyle.addVis_listI_Label}>{'Store Name :'}</Text>
                                                            <Text style={customStyle.addVis_listI_Val}>{item.StoreName}</Text>
                                                        </View>
                                                        <View style={customStyle.addVis_listI_row}>
                                                            <Text style={customStyle.addVis_listI_Label}>{'Address :'}</Text>
                                                            <Text style={customStyle.addVis_listI_Val}>{`${item.Address}, ${item.CityName}- ${item.Pincode}`}</Text>
                                                        </View>
                                                        <View style={customStyle.addVis_listI_row}>
                                                            <Text style={customStyle.addVis_listI_Label}>{'StoreType :'}</Text>
                                                            <Text style={customStyle.addVis_listI_Val}>{item.StoreType}</Text>
                                                        </View>

                                                    </View>


                                                </View>


                                            </View>
                                        );
                                    })
                                }
                            </View>
                        </View>
                    </ScrollView>
                }
            </View>
        )
    }

    const hideDatePicker = () => {
        setShowDatePicker(false);
    };

    const handleConfirm = (date) => {
        setTextValue(date)
    };

    function setTextValue(value) {
        let d2 = moment(value).format('DD/MM/YYYY');
        let dateString = String(d2)

        hideDatePicker();
        if (FromDateObj?.ColumnName == 'FromDate') {
            setFromDate(dateString)
            setFromDate2(value)
        } else if (FromDateObj?.ColumnName == 'ToDate') {
            setToDate(dateString)
            setToDate2(value)
        }

        onFormDataChange(dateString, FromDateObj?.ColumnName)
    }

    return (
        <Container {...props} pt={0} avoidSafeArea={(Platform.OS == 'ios' ? true : false)}>
            {processing && <CustomLoader fullHeight={true} title={loaderTitle} />}
            <View style={{ zIndex: 10 }}>
                <CustomHeader {...props} showaddstore={true} title={"Added Stores List"} />
            </View>
            {_OpenCaptureImage_Modal()}

            {ConfirmSaveAlert(props, showRemoveConfirm_M, () => { setshowRemoveConfirm_M(false) }, Remove_AddVis, ST.Doyoureallywanttoremovethisvisibility)}
            {ConfirmSaveAlert(props, showRAllC_M, () => { setShowRAllC_M(false) }, onConfirmRemoveAll, ST.Doyoureallywanttoremoveallvisibilitydata)}
            <CustomCamera cameraType={'back'} BottomText={'Store Name:' + storeData.StoreName + ' | Store Id:' + storeData.StoreId + ' | User Id:' + storeData.EmpId + ' | Image Type: ' + currentMenu.MenuName} enableCameraFlip={showSwitchCamera} onImageCaptured={(imgData) => { setShowCamera(false); getImage(imgData) }} 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, customStyle.zIndex0]}>
                <View style={[customStyle.pageContentWrapper]}>
                    {
                        <View style={customStyle.addVis_Wrapper}>
                            {_render_addVisFormTop()}
                        </View>
                    }

                </View>

            </LinearGradient>

        </Container>
    );
}

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