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(this.props)
      }
    })
  }

  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)
    }  
  }

  toRender = () => {
    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.toRender()}
          </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',
  }
})