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 CustomLoader from '../components/CustomLoader';
import LinearGradient from 'react-native-linear-gradient';
import { FontAwesome, Fontisto, Ionicons, MaterialCommunityIcons } from '../components/icons';
import NoDataComponent from '../components/NoDataComponent';
import WebView from 'react-native-webview';

function Training(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 [webviewurl, setWebviewurl] = useState('');
  

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


  async function getData(){        
    try {   
      
      await db.transaction(async function (txn) {        
        
        let q=`Select * from Training_Document `;
        await txn.executeSql(q,[],async function (txn2, txnres2) { 
          console.log('Training_Document:',txnres2.rows.length);
            if(txnres2.rows.length>0){
              let data =txnres2.rows.item(0);
              console.log('Training_Document:',data);
              setWebviewurl(data.TraningLink);
            }
        },function (txnE,txnerr) { console.log(txnerr); },);
      });          
    } catch (err) {
      console.log(err);          
    }        
}
  
 
  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS=='ios'?true:false)}>
      {processing && <CustomLoader title={ST.Loading+".."}/>}
      <CustomHeader {...props} showaddstore={true} title={ST.Training}/>
      <LinearGradient colors={[PageTheme.$gradient1,PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={customStyle.roundScrollWrapper}>
        <View style={[customStyle.pageContentWrapper,customStyle.roundScrollInner,{paddingTop:0}]}>
        { !props.isDataDownloaded && <NoDataComponent {...props}/>}
        { props.isDataDownloaded==true &&  webviewurl!='' && webviewurl!=null &&
          <WebView style={[customStyle.fullwebview]} containerStyle={[customStyle.webViewCon,{paddingTop:10,paddingLeft:10,}]}  source={{ uri: webviewurl }} />
        }
        
        </View>      
      </LinearGradient>      
    </Container>
  );
}

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