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, Modal, Animated } from 'react-native';
import { connect } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../reducers/contextProvider';
import { notify } from '../components/notify';
import { WebView } from 'react-native-webview';
import CustomLoader from '../components/CustomLoader';
import LinearGradient from 'react-native-linear-gradient';
import CustomHeader from '../components/customHeader';

function WebViewScreen(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 [state, setState] = useState({ webviewurl: '' });
  const [processing, setProcessing] = useState(true);
  const [loaderTitle, setLoaderTitle] = useState();
  const [storeData, setStoreData] = useState({});

  const projectCode = props.projectCode;

  useEffect(() => {
    setLoaderTitle(ST.Loading + '...')
    let params = props.route.params ? props.route.params : {};
    let WebURL = params.url || {};
    let storeData1 = params.storeData || {};

    setStoreData(storeData1);
    console.log("checkurl-------", WebURL)
    setState({ webviewurl: WebURL })
    setProcessing(false)
  }, []);


  return (
    <Container {...props} pt={0} avoidSafeArea={(Platform.OS == 'ios' ? true : false)}>
      {processing && <CustomLoader title={ST.Loading + ".."} />}
      <CustomHeader {...props} showaddstore={true} title={ST.Training} projectCode={storeData != null && Object.keys(storeData).length > 0 ? `${storeData.StoreId}: ${storeData.StoreName}` : props.projectCode} />
      <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: 10, paddingHorizontal: 10 }, { alignItems: "center" }]}>
          {/* <View  style={[customStyle.trainingHdr]}>
            <Text style={customStyle.trainingHdrText}>Training Content</Text>
        </View> */}
          <View style={[customStyle.pageContentWrapper, customStyle.roundScrollInner, { paddingTop: 0 }]}>
            {(state.webviewurl != '' && state.webviewurl != null) && <WebView style={customStyle.fullwebview}
              containerStyle={customStyle.webViewCon}
              source={{ uri: state.webviewurl }}
              cacheEnabled={false}  // Disable cache
              incognito={true} />}
          </View>
        </View>
      </LinearGradient>

    </Container>
  );
}

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