import * as React from 'react';
import { connect } from "react-redux";
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, RefreshControl, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import NetInfo from "../../components/netstatus"
import CustomHeader from '../../components/header.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 CustomSafeArea from '../../components/safeArea.component';


class Rewards extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: true,
    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 })
    if(!this.state.guest){
      try{
        await REQUEST("shared_treats", "get", {
          Authorization: SESSION.token
        }, {}, {}, 
          async (res) => {
            if(res.status == 1 && res.data){
              this.setState({ data: res.data, loading: false, refreshing: false })
            }
          }, (err) => {  
            if(err?.message){
              Alert.alert("Information", `\n${err?.message}`);
              this.setState({ loading: false, refreshing: false })
            }
          }, "Shared treats", "Fetch"
        )  
      } catch(err) {
        this.setState({ loading: false, refreshing: false })
      }  
    }
  }

  onReload = () => {
    this.setState({ refreshing: true });
    this.init();
  }

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

        <Elements.loaderView 
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading} />
      </ScrollView>
    )
  }

  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 apply for a 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',
  }
})