import React,{useState,useEffect,useRef} from 'react';
import Container from '../components/container';
import { useFocusEffect, useRoute } from '@react-navigation/native';
import { globalStyles,customStyles,GetPageTheme } from "../styles/Global";
import {Image,TextInput,View,Text,ScrollView,TouchableOpacity,Platform, DeviceEventEmitter, PermissionsAndroid, Keyboard} from 'react-native';
import { connect } from 'react-redux';
import { mapStateToProps,mapDispatchToProps } from '../reducers/contextProvider';
import {notify} from '../components/notify';
import moment from 'moment';
import {clear_item, get_item} from '../components/localStorage';
import CustomHeader from '../components/customHeader';
import {  Ionicons, MaterialCommunityIcons} from '../components/icons';
import {UploadData2, checkRange,  getAllFileForAFolder,  getDownloadJson1,  restore_ImageWithMetaData, uploadContractFormFiles, validateNumber} from '../controller/functions';
import CustomLoader from '../components/CustomLoader';
import { AppTables } from '../constants/tableConstants';
import { SvgXml } from 'react-native-svg';
import * as RNFS from 'react-native-fs';
import GradientButton from '../components/gradientButton';
import MapIcon from '../assets/performics/map_icon.svg';
import Geolocation from 'react-native-geolocation-service';
import { db, CoverageImagePath, AppVersion , AddStoreImagePath, URL_IMAGE} from '../constants/constants';
import CameraImg3 from '../assets/performics/camera_tick.svg';
import cameraImg from '../assets/performics/camera_front_image.svg'
import CustomModal from '../components/CustomModal';
import ModalSelector from 'react-native-modal-selector';
import MapView, { AnimatedRegion, Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';
import { _checkLocationPermission } from '../components/geolocation';
import { CustomPicker } from '../components/CustomPicker';
import { ConfirmSaveAlert } from '../components/alert';
import { METHODS, getMethodName } from '../constants/methodNames';
import { UploadImagesWithoutWait } from '../constants/uploadData';

function StoreInfoList(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 globalStyle = globalStyles(props.DarkMode, route.name);
  
  const [processing, setProcessing] = useState(false);
  const [loaderTitle, setLoaderTitle] = useState();
  const [isDataFound, setisDataFound] = useState(false);

  const [addstoreinfo, setAddStoreInfo] = useState([]);

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

  useEffect(()=>{
    getData();
    setLoaderTitle(ST.Loading+'...');
  },[])


  async function getData(){     
    setProcessing(true)   
    try {
      
      let allReportData= await DownloadReport();
      console.log('allReportData',allReportData);
      if(allReportData.length>0){
          setAddStoreInfo(allReportData);
          setProcessing(false);
          setisDataFound(true);
      }
      else{
          notify(ST.Nodatafound);
          setProcessing(false);
      }

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

  async function DownloadReport(){
      let downloadKey="Master_StoreAdded";
      let loginInfo = await get_item('loginInfo');
      const loginDetails = JSON.parse(loginInfo);
      const url=props.baseurl+getMethodName(METHODS.DOWNLOADJSON_METHOD);
      let data={
        Downloadtype:downloadKey,
        Username: loginDetails.UserId,
        Param1: '',
        Param2: Platform.OS=="ios"?"iOS":"Android",
      };

      console.log(url,data);
      return await getDownloadJson1(url,data)
      .then(async(res)=>{  
        if (res[downloadKey]) {
          let data_arr = res[downloadKey] || []; 
          return data_arr;
        }
        else{
          return [];
        }        
      })
      .catch((err)=>{
        console.log('onPage Team error',err);
        return [];
      }); 
  }

  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS=='ios'? true:false)}>
      {processing && <CustomLoader title={loaderTitle}/>}
      <CustomHeader {...props} showaddstore={true} title={'Store Info List'} />

      { /*<View style={[customStyle.STp_hdrParent]}>
              <View  style={[customStyle.STp_Hdr]}>
                <Text style={customStyle.STp_HdrText}>{ST.StoreProfile}</Text>
              </View>
  </View> */}
     
      <ScrollView style={{flex:1 , width:'100%', paddingRight:20, paddingLeft:10}}>
      

      { isDataFound==false && 
        <View style={customStyle.noDataCon}>
          <Text style={customStyle.noDataText}>{ST.NoDataAvailable}</Text>
        </View>
      }
      <View style={customStyle.addVis_list}>
      {addstoreinfo.length> 0 &&<Text style={customStyle.addVis_listhdrText}>{ST.Storeaddedinlastsevendays}</Text>}
      <View style={customStyle.addVis_listInner}>
          {
            addstoreinfo.length> 0 &&
            addstoreinfo.map((item,index)=>{
                  return (
                      <View key={index} style={customStyle.addVis_listItem}>
                          <View style={customStyle.addVis_listI_row2}>
                              <View style={[customStyle.addVis_listIcol1 ,customStyle.addVis_listIcol100]}>
                                  <View style={customStyle.addVis_listI_row}>
                                      <Text style={customStyle.addVis_listI_Label}>{ST.DistributorName+' :'}</Text>
                                      <Text style={customStyle.addVis_listI_Val}>{item.Distributor}</Text>
                                  </View>
                                  <View style={customStyle.addVis_listI_row}>
                                      <Text style={customStyle.addVis_listI_Label}>{ST.StoreName+' :'}</Text>
                                      <Text style={customStyle.addVis_listI_Val}>{item.StoreName}</Text>
                                  </View>
                                  <View style={customStyle.addVis_listI_row}>
                                      <Text style={customStyle.addVis_listI_Label}>{ST.StoreAddress+' :'}</Text>
                                      <Text style={customStyle.addVis_listI_Val}>{item.StoreAddress}</Text>
                                  </View>
                                  <View style={customStyle.addVis_listI_row}>
                                      <Text style={customStyle.addVis_listI_Label}>{ST.CityName+' :'}</Text>
                                      <Text style={customStyle.addVis_listI_Val}>{item.City}</Text>
                                  </View>
                                  <View style={[customStyle.addVis_listI_row]}>
                                      <Text style={customStyle.addVis_listI_Label}>{ST.StoreType+' :'}</Text>
                                      <Text style={customStyle.addVis_listI_Val}>{item.StoreType}</Text>
                                  </View>
                              </View>
                             
                              
                          </View>
                      </View>
                  );
              })
          }
      </View>  
       
    
      </View>
      </ScrollView>
        
    </Container>
  );
}

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


