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 DynamicSurveyCat(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 [ActiveSurvey, setActiveSurvey]= useState({});
    
    
    const d1=new Date();
    const d2=moment(d1).format('MM/DD/YYYY');
  
    useEffect(() => {
        let params=props.route.params? props.route.params:{};
        let storeData1=params.storeData || {};
        let surveydata=params.surveyData || {};
        let menu1=params.menu || {};
        let isAdhoc=params.isAdhocScreen || false;
        setIsAdhocScreen(isAdhoc);
        setStoreData(storeData1);
        setActiveSurvey(surveydata)
        setCurrentMenu(menu1);
        getData(surveydata,storeData1);
    }, []);
    
    async function getData(surveydata,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 {SurveyName,SurveyId,ShowCat,CategoryId,Category,CategorySequence}=item;
                let obj={SurveyName,SurveyId,ShowCat,Category,CategoryId}
                
                if(item.SurveyId==surveydata.SurveyId && arr.findIndex(a=>a.CategoryId==item.CategoryId)<0)
                {    
                    arr.push(obj);
                }
            }
            setSurveys(arr);setProcessing(false);
   
        } catch (err) {
          console.log(err);          
        }        
    }
    
    function openSurveyView(item){
        props.navigation.navigate('SurveyView',{'surveyData':ActiveSurvey,'catData':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} 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]}>
            <View style={customStyle.SVn_activeSurvey}>
                <LinearGradient colors={[PageTheme.$primary_color,PageTheme.$gradient1]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={customStyle.SVn_activeSurvey_tile}>
                    <Text style={customStyle.SV_activeSurvey_name}>{(ActiveSurvey.SurveyName!=null?(ActiveSurvey.SurveyName.length>26?ActiveSurvey.SurveyName.substring(0,26)+'...':ActiveSurvey.SurveyName) : '')}</Text>
                </LinearGradient>
            </View>
          { Object.keys(storeData).length>0 &&            
            <FlatList 
            data={surveys}
            contentContainerStyle={customStyle.surveyListInner} 
            style={[customStyle.surveyCatList]}
            renderItem={({item,index})=>{
                return(
                    <TouchableOpacity activeOpacity={0.7} style={customStyle.surveyItem} onPress={()=>{openSurveyView(item)}}>
                        <View style={customStyle.surveyCatItem}>
                            <View style={customStyle.surveyCatItem_Circle}>
                                <Text style={customStyle.surveyCatItem_CircleText}>{item.Category.substring(0,1)}</Text>
                            </View>
                            <Text style={customStyle.surveyCatItem_name}>{item.Category}</Text>
                        </View>
                    </TouchableOpacity>
                );
            }}
            />
          }  
         </View> 
       </LinearGradient> 
      </Container>   
    ); 
}
  
  

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