import * as React from 'react';
import {useState, useEffect} from 'react';
import { connect } from "react-redux";
import { SafeAreaView, Button, View, Text, StyleSheet, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import {useNetInfo} from "@react-native-community/netinfo";
// import NetInfo from "@react-native-community/netinfo";
import NetInfo from "../../components/netstatus"
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import { TouchableOpacity } from 'react-native-gesture-handler';
import CustomSafeArea from '../../components/safeArea.component';


class Rewards extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    data: "",
    connection: false,
    guest: false,
  }

  componentDidMount() {
    this.initRewards()
  }

  componentWillUnmount() {

  }

  initRewards = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.init()
      } else {
        Elements.nointernet2()
      }
    })
  }

  init = async () => {
    let isGuest = await DB.get("is_guest");
    const SESSION = await DB.session()
    this.setState({ guest: isGuest, connection: true })
    try{
      await REQUEST("shared_treats", "get", {
        Authorization: SESSION.token
      }, {}, {}, 
        async (res) => {
          console.log(res)
          if(res.status == 1 && res.data){
            this.setState({ data: res.data })
          } else {
            console.log(res.message, res.data)
          }
        }, (error) => {  
          console.log(error)
        }
      )  
    } catch(error) {
      console.log(error)
    }  
  }

  render = () => {
    if(!this.state.connection){
      return (
        <Elements.nointernet
          message="No internet found. Please check your internet connection."
          buttonText="Try Again"
          onPress={() => this.initRewards()}
        />
      )
    }
    return (
      <WebView
        originWhitelist={['*']}
        source={{uri: this.state.data.site}}
        startInLoadingState={true}
        scalesPageToFit={true}
        style={{
          width: Theme.screen.w,
          height: Theme.screen.h
        }}
      />)
  }

  render() {
    return (
      <CustomSafeArea>
        <CustomHeader title="Rewards" menu={true} navigation={this.props.navigation} />
        {
          !this.state.guest ? 
          <View style={{flex: 1}}>
            {this.render()}
          </View>
          :
          <View style={styles.viewStyle}>
            <View style={[styles.viewStyle1, { paddingHorizontal: 20 }]}>
              <Text style={[styles.viewStyle1, { fontSize: 15, color: this.props.app_theme?.theme.colors.text }]}>
                You won't be able to access some of the pages unless you will enroll your card or login.
              </Text>
              <TouchableOpacity style={styles.enrollBtn} onPress={()=>{ this.props.navigation.navigate('Login') }}>
                <Text style={[styles.enrollBtnTxt]}>Enroll Card</Text>
              </TouchableOpacity>
            </View>
          </View>
        }
      </CustomSafeArea>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(Rewards)

export const styles = StyleSheet.create({
  enrollBtn: {
    backgroundColor: '#e74610',
    height: Theme.screen.h / 19,
    marginHorizontal: 15,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 15,
    paddingHorizontal: 15,
    elevation: 2
  },
  enrollBtnTxt: {
    textAlign: 'center',
    alignItems: 'center',
    color: '#fff',
    fontWeight: '600',
    fontSize: 14
  },
  viewStyle: {
    height: Theme.screen.h,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  viewStyle1: {
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  }
})

// export default function Rewards(navigation) {

//   const [data, setdata] = useState("")
//   const [connection, setconnection] = useState(false)
//   const netInfo = useNetInfo();
//   const [guest, setGuest] = useState(false)

//   const init = async () => {
//     let isGuest = await DB.get("is_guest");
//     setGuest(isGuest)
//     setconnection(true)
//     const SESSION = await DB.session()
//     try{
//       await REQUEST("shared_treats", "get", {
//         Authorization: SESSION.token
//       }, {}, {}, 
//         async (res) => {
//           if(res.status == 1 && res.data){
//             await setdata(await res.data)
//           }else{
//             console.log(res.message, res.data)
//           }
//         }, function(error){  
//           console.log(error)
//         }
//       )  
//     }catch(error){
//       console.log(error)
//     }  
//   }

//   const styles = StyleSheet.create({
//     enrollBtn: {
//       backgroundColor: '#e74610',
//       height: Theme.screen.h / 19,
//       marginHorizontal: 15,
//       borderRadius: 10,
//       alignItems: 'center',
//       justifyContent: 'center',
//       marginVertical: 15,
//       paddingHorizontal: 15,
//       elevation: 2
//     },
//     enrollBtnTxt: {
//       textAlign: 'center',
//       alignItems: 'center',
//       color: '#fff',
//       fontWeight: '600',
//       fontSize: 14
//     },
//     viewStyle: {
//       height: Theme.screen.h,
//       flex: 1,
//       flexDirection: 'row',
//       justifyContent: 'center'
//     },
//     viewStyle1: {
//       justifyContent: 'center',
//       alignItems: 'center',
//       textAlign: 'center',
//     }
//   })

//   useEffect(() => {
//     NetInfo.fetch().then(state => {
//       console.log("Connection type", state.type);
//       console.log("Is connected?", state.isConnected);
//       if(state.isConnected){

//         // Alert.alert("System Advisory", "We're working on more exciting rewards for you! Redemption of points will be temporarily unavailable. A notification will be sent once this feature has been restored. \nWe apologize for the inconvenience.");
//         init()

//       }else{
//         Elements.nointernet2()
//       }
//     });
//   }, [])

//   console.log(data.site)

//   const render = () => {
//     if(!connection){
//       return (
//         <Elements.nointernet
//           message="No internet found. Please check your internet connection."
//           buttonText="Try Again"
//           onPress={() => {
//             NetInfo.fetch().then(state => {
//               console.log("Connection type", state.type);
//               console.log("Is connected?", state.isConnected);
//               if(state.isConnected){
//                 init()
//               }else{
//                 Elements.nointernet2()
//               }
//             })
//           }}
//         />
//       )
//     }
//     return (
//       <WebView
//         originWhitelist={['*']}
//         source={{uri: data.site}}
//         startInLoadingState={true}
//         scalesPageToFit={true}
//         style={{
//           width: Theme.screen.w,
//           height: Theme.screen.h
//         }}
//       />)
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <CustomHeader title="Rewards" menu={true} navigation={navigation} />
//       {
//         !guest ? 
//         <View style={{flex: 1}}>
//           {render()}
//         </View>
//         :
//         <View style={styles.viewStyle}>
//           <View style={[styles.viewStyle1, { paddingHorizontal: 20 }]}>
//             <Text style={[styles.viewStyle1, { fontSize: 15 }]}>
//               You won't be able to access some of the pages unless you will enroll your card or login.
//             </Text>
//             <TouchableOpacity style={styles.enrollBtn} onPress={()=>{ navigation.navigation.navigate('Login') }}>
//               <Text style={styles.enrollBtnTxt}>Enroll Card</Text>
//             </TouchableOpacity>
//           </View>
//         </View>
//       }
//     </SafeAreaView>
//   );
// }