import * as React from 'react';
import { connect } from "react-redux";
import { ScrollView, Linking, View, Text, RefreshControl, Alert } from 'react-native';
import NetInfo from "../../../components/netstatus";
import Theme from '../../../components/theme.style.js';
import Elements from '../../../components/elements.js';
import REQUEST from '../../../components/api/';
import DB from '../../../components/storage/';
import CustomSafeArea from '../../../components/safeArea.component';

class MyTransactions extends React.Component {

  constructor(props) {
    super(props)
    this.navigate = props.navigation.navigation.navigate
  }

  state = {
    connected: false,
    loading: true,
    refreshing: false,
    transactions: [],
    errorMessage: ""
  }

  componentDidMount() {
    this.initTransactions()
  }

  componentWillUnmount() {

  }

  initTransactions = async () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected){
        this.init()
      } else {
        this.setState({ loading: false, refreshing: false });
        Elements.nointernet2(this.props)
      }
    })
  }

  init = async () => {
    const SESSION = await DB.session();

    this.setState({ transactions: [], loading: true, connected: true })

    await REQUEST("transactions", "get", {
        Authorization: SESSION.token,
        card_number: SESSION.user.card_number 
      }, {}, {}, (data) => {
        console.log(data)
        if(!data.status) {
          Alert.alert("Information", "\n" + data.message);
          return this.setState({ transactions: [], loading: false, refreshing: false, errorMessage: data.message })
        } 
        
        this.setState({ transactions: [...data.data], loading: false, refreshing: false })
      }, (err) => {  
        Alert.alert("Information", `\n${err.message}`);
        this.setState({ transactions: [], loading: false, refreshing: false })
      }, "Transactions", "Fetch"
    );
  }

  renderTransactions = () => {
    return this.state.transactions?.map((data, index) => {
      const disabled = ["MOBILE APP SIGN UP BONUS", "SIGN UP BONUS"].includes(data.entry_type_desc);

      return (
        <View style={{marginBottom: index === this.state.transactions?.length - 1 ? 30 : 0}}>
          <Elements.transaction 
            data={data} 
            disabled={disabled}
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            cardBackgroundColor={this.props.app_theme?.theme.colors.border}
            onPress={() => {
              if(!disabled) {
                this.navigate("TransactionDetails", {data: data, onBackPress: () => this.init()})
              }
            }} 
            key={index} />
        </View>
      )
    });
  }

  render() {
    if(!this.state.connected && !this.state.loading){
      return (
        <View style={{flex: 1}}>
          <Elements.nointernet 
            message="No internet found. Please check your internet connection." 
            buttonText="Try Again" 
            onPress={() => this.init()}
          />
        </View>
      )
    }

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

    return (
      <CustomSafeArea>
        <ScrollView
          style={{ backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white}}
          contentContainerStyle={{ flexGrow: 1 }}
          showsHorizontalScrollIndicator={false}
          refreshControl={
            <RefreshControl refreshing={this.state.refreshing} onRefresh={onReload} />
          }>
          {this.state.transactions?.length === 0 && !this.state.refreshing && !this.state.loading ? 

            <View style={{flex: 10, justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{width: '70%', textAlign: 'center', color: this.props.app_theme?.theme.colors.text}}>There's nothing here.</Text>
              <Text style={{width: '70%', textAlign: 'center', color: this.props.app_theme?.theme.colors.text}}>You have made no transactions yet.</Text>
            </View>
            : 
            <View>
              {!this.state.refreshing && !this.state.loading && <View style={{paddingVertical: 15, alignItems: 'center'}}>
                <Text style={{fontSize: 13 ,padding: 15, width: '100%', textAlign: 'center', color: this.props.app_theme?.theme.colors.text}}>
                  Only your last 5 transactions can be viewed. For your complete transaction history please go to&nbsp;
                  <Text style={{color: Theme.colors.primary, textDecorationLine: 'underline'}} onPress={() => {
                      let url = 'https://unioil.com/loyalty';
                      return Linking.openURL(url)
                    }}>
                      unioil.com/loyalty
                  {this.state.errorMessage}

                  </Text>
                </Text>
              </View>}
              <View>{this.renderTransactions()}</View>
            </View>
            }
        </ScrollView>
        <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} />
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(MyTransactions)