import React,{useState,useEffect, useRef} from 'react';
import Container from '../components/container';
import { useRoute } from '@react-navigation/native';
import { customStyles,GetPageTheme, STATUSBAR_HEIGHT } from "../styles/Global";
import {Image,TextInput,View,Text,ScrollView,TouchableOpacity,Platform,FlatList, Alert,Animated} from 'react-native';
import { connect  } from 'react-redux';
import { mapStateToProps,mapDispatchToProps } from '../reducers/contextProvider';
import {notify} from '../components/notify';
import moment from 'moment';
import {get_item,set_item,clear_item} from '../components/localStorage';
import {db,} from '../constants/constants';
import CustomHeader from '../components/customHeader';
import CustomLoader from '../components/CustomLoader';
import LinearGradient from 'react-native-linear-gradient';


function DynamicSurveys(props) { 
    const route = useRoute();
    
    // get all theme styles acc to current theme set 
    const PageTheme=GetPageTheme(props.DarkMode,route.name);
    const customStyle=customStyles(props.DarkMode,route.name);
  
    const [processing, setProcessing] = useState(true);
    const [loaderTitle, setLoaderTitle] = useState('loading...');
    const [isAdhocScreen, setIsAdhocScreen] = useState(false);
    const [storeData, setStoreData] = useState({});
    const [currentMenu, setCurrentMenu] = useState({});
    const [surveys, setSurveys] = useState([]);
    
    
    const d1=new Date();
    const d2=moment(d1).format('MM/DD/YYYY');
  
    useEffect(() => {
       let storeData1={"Address": "test", "ChainId": 1, "ChainName": "GT", "ChannelId": 1, "CheckInTime": "", "CheckOutTime": "", "CityId": 3, "CityName": "Thailand", "ContactPerson": "bhhvhhhhhhh be", "Email": "njj", "EmpId": 4, "ExpiryStock": "N", "GeoFenceRadius": 500, "GeoTag": "Y", "InTime": "00:00:00", "Landmark": "-j", "Latitude": "28.5376374", "Location": "Lower Parel", "Longitude": "77.297907", "MID": 852, "Mobile": "9969999999", "OutTime": "00:00:00", "Phone": "6699996669", "Pincode": "400001", "RegionId": 1, "StateId": 1, "StateName": "Chiang Mai", "StoreCode": "W-S-LS-ST00008", "StoreId": 1, "StoreName": "teststore1", "StoreType": "D150", "StoreTypeId": 1, "UploadStatus": "N", "VisitDate": "05/09/2022"};
       let menu1={"MenuName":"Survey","MenuId":"1"};
       let isAdhoc=false;
       setIsAdhocScreen(isAdhoc);
       setStoreData(storeData1);
       setCurrentMenu(menu1);
       getData(storeData1);
    }, []);
    
    async function getData(storeData1){        
        try {   
            let {StoreId,ChainId,StateId,StoreTypeId}=storeData1;
            let surveyQtns=require('../constants/s_qtns.json');
            // setSurveyJson(surveyQtns);
            let arr=[]
            for(const i in surveyQtns){
                let item=surveyQtns[i]
                let obj={SurveyName:item.SurveyName,SurveyId:item.SurveyId,ShowCat:item.ShowCat}
                if(arr.findIndex(a=>a.SurveyId==item.SurveyId)<0)
                {    
                    arr.push(obj);
                }
            }
            setSurveys(arr);setProcessing(false);
   
        } catch (err) {
          console.log(err);          
        }        
    }
    
    function openSurveyView(item){
        let {ShowCat}=item
        console.log(item);
        if(ShowCat==1){
            props.navigation.navigate('DynamicSurveyCat',{'surveyData':item,'storeData':storeData,'menu':currentMenu,'isAdhocScreen':isAdhocScreen});
        }
        else{
            props.navigation.navigate('SurveyView',{'surveyData':item,'storeData':storeData,'menu':currentMenu,'isAdhocScreen':isAdhocScreen});
        }
    }
    
  
    return ( 
      <Container {...props} pt={0} avoidSafeArea={(Platform.OS=='ios'?true:false)}>
        {processing && <CustomLoader fullHeight={true} title={loaderTitle}/>}
        <CustomHeader {...props}showaddstore={true} title={currentMenu.MenuName} projectCode={`${storeData.StoreId}: ${storeData.StoreName}`}/>        
        <LinearGradient colors={[PageTheme.$gradient1,PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[customStyle.roundScrollWrapper,customStyle.roundScrollZIndex]}>
          <View style={[customStyle.pageContentWrapper,customStyle.surveyPageWrapper]}>
          
          { Object.keys(storeData).length>0 &&            
            <FlatList 
            data={surveys}
            contentContainerStyle={customStyle.surveyListInner} 
            style={customStyle.surveyList}
            renderItem={({item,index})=>{
                return(
                    <TouchableOpacity style={customStyle.surveyItem} onPress={()=>{openSurveyView(item)}}>
                        <LinearGradient colors={[PageTheme.$secondary_color_light,PageTheme.$gradient2]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={customStyle.surveyItem_tile}>
                            <View style={customStyle.surveyItemCircle}>
                                <Text style={customStyle.surveyItemCircle_Text}>{item.SurveyName.substring(0,1)}</Text>
                            </View>
                            <Text style={customStyle.surveyItem_name}>{item.SurveyName}</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                );
            }}
            />
          }  
         </View> 
       </LinearGradient> 
      </Container>   
    ); 
}
  
  

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