import React,{useState,useEffect} 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} 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,DownloadData} from '../controller/functions';
import {get_item,set_item,clear_item} from '../components/localStorage';
import {version,sloganline,appname,testurl, db} from '../constants/constants';
import CustomHeader from '../components/customHeader';
import {Card} from 'react-native-paper';
import {AntDesign} from '../components/icons';
import { WebView } from 'react-native-webview';
import CustomLoader from '../components/CustomLoader';
import NoDataComponent from '../components/NoDataComponent';
import LinearGradient from 'react-native-linear-gradient';

function ReportsMenu(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 [webviewurl, setWebviewurl] = useState(false);
    const [processing, setProcessing] = useState(true);
    const [isDataFound, setisDataFound] = useState(false);
    const [reportData, setReportData] = useState([]);
    const [designation, setDesignation] = useState('');
    const d1=new Date();
    const d2=moment(d1).format('MM/DD/YYYY');
  
    useEffect(() => {
      getData();
    }, []);
    

    async function getData(){        
      try {   
        let loginInfo=await get_item('loginInfo');
        const loginDetails=JSON.parse(loginInfo);
        let desg=loginDetails.Designation || '';
        setDesignation(desg);
        await db.transaction(async function (txn) {        
          
          let q=`SELECT * from Sup_Master_MenuReports`;
          await txn.executeSql(q,[],async function (txn2, txnres) { 
              if(txnres.rows.length>0){
                let arr=[];
                for(var i=0;i<txnres.rows.length;i++){
                  let data= txnres.rows.item(i);
                  arr.push(data);
                  if(i==txnres.rows.length-1){
                    setReportData(arr);
                    setisDataFound(true);
                    setProcessing(false);
                  }
                }
                
              }
              else{
                setProcessing(false);
              }
          },function (txn2, txnerr) { console.log(txnerr); setProcessing(false);},);
          
        });          
      } catch (err) {
        setProcessing(false);
        console.log(err);          
      }        
    }

    function gotoReport(item){
      props.navigation.navigate('ReportDetail',{'ReportData':item})
    }


    
  
    return ( 
      <Container {...props} pt={0} avoidSafeArea={(Platform.OS=='ios'?true:false)}>
        {processing && <CustomLoader title={ST.Loading+"..."}/>}
        <CustomHeader {...props} title={'Reports Menu'}/>
        <LinearGradient colors={[PageTheme.$gradient1,PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={customStyle.roundScrollWrapper}>
        <View style={[customStyle.pageContentWrapper]}>
          { !props.isDataDownloaded && <NoDataComponent {...props}/>}
          { props.isDataDownloaded==true && 
            <View>
              
              { isDataFound==false && 
                <View style={customStyle.noDataCon}>
                  <Text style={customStyle.noDataText}>{ST.NoDataAvailable}</Text>
                </View>
              }

              {
                isDataFound==true &&
                <ScrollView
                  contentContainerStyle={customStyle.rp_scrollViewInner}
                  style={customStyle.rp_scrollView}
                >
                  <View style={[customStyle.vlUinfo_Card]}>
                    <View style={[customStyle.vlUinfo_CardRow,customStyle.vlUinfo_CardBorder]}> 
                      <Text style={customStyle.vlUinfo_lbl}>{ST.Username+' :'}</Text>  
                      <Text style={customStyle.vlUinfo_text}>{props.UserId}</Text>                
                    </View> 
                    <View style={customStyle.vlUinfo_CardRow}> 
                      <Text style={customStyle.vlUinfo_lbl}>{ST.Designation+' :'}</Text>  
                      <Text style={customStyle.vlUinfo_text}>{designation}</Text>                
                    </View> 
                  </View>
                  <View style={customStyle.reportMenuCon}>
                    {
                      reportData.length>0 &&
                      reportData.map((item,index)=>{
                        return(
                          <TouchableOpacity style={[customStyle.reportMenuItem]} key={index}  onPress={()=>{gotoReport(item)}}>
                            <Text style={customStyle.reportMenuItemText}>{item.ReportName}</Text>
                          </TouchableOpacity>
                        )
                      })
                    }
                  </View>
                </ScrollView>
              }
                
            </View>
          }
        </View>
        </LinearGradient>

      </Container>   
    ); 
  }
  
  

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