import * as React from 'react';
import { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image, Alert, Linking, Platform } from 'react-native';
import { connect } from "react-redux";
import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import REQUEST from '../../../components/api';
import DB from '../../../components/storage';
import { openComposer } from 'react-native-email-link';
import { dateFormater } from '../../../utils/date.js';
import CustomSafeArea from '../../../components/safeArea.component.js';
import AdjustableText from '../../../components/text/AdjustableText.js';


class TransactionDetails extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: true,
    ratesubmitted: false,
    rating: 0,
    session: '',
    transaction: {},
    umail: "",
    cn: ""
  }

  componentDidMount() {
    this.init()
  }

  init = async () => {
    let SESSION = await DB.session();
    let user_profile = await DB.profile()

    this.setState({ cn: user_profile.data.card_number, session: SESSION })

    if(this.props.route.params.data.entry_type_desc === "MOBILE APP SIGN UP BONUS") {
      return this.setState({ transaction: this.props.route.params.data, loading: false })
    }

    REQUEST("transaction_single", "post", {
      Authorization: SESSION.token,
    }, {}, {
      trans_num: this.props.route.params.data.trans_num,
      ref_num: this.props.route.params.data.ref_num,
      source: this.props.route.params.data.source,
      entry_type_code: this.props.route.params.data.entry_type_code
    }, (data) => {
      if(data.status === 0) {
        this.setState({ transaction: this.props.route.params.data, loading: false })
      } else {
        this.setState({ transaction: data.data, loading: false })
      }
    }, (err) => {
      Alert.alert("Information", `\n${err.message}`);
      this.setState({ loading: false })
    }, "Transaction", "Fetch");
  }

  renderRatings = (rating, disabled) => {
    return [1, 2, 3, 4, 5].map((rate, i) => {
      return (
        <TouchableOpacity disabled={disabled} style={{flex: 1, alignSelf: 'center', padding: 1}} activeOpacity={0.5} onPress={() => this.setState({ rating: rate })}>
          <Icon.AntDesign name={rating >= rate ? "star" : "staro"} color={rating > 0 || !this.state.ratesubmitted ? Theme.colors.yellow : Theme.colors.darkerGray} size={40} />
        </TouchableOpacity>
      )
    })
  }

  onSubmit = async () => {
    this.setState({ loading: true })
    REQUEST('transaction_rate', 'post', {
      Authorization: this.state.session.token,
      Accept: 'application/json',
      card_number: this.state.session.user.card_number
    }, {}, {
      trans_num: this.props.route.params.data.trans_num,
      ref_num: this.props.route.params.data.ref_num,
      entry_type_code: this.props.route.params.data.entry_type_code,
      source: this.props.route.params.data.source,
      rate: this.state.rating
    }, (result) => {
      this.setState({ loading: false, ratesubmitted: true })
      Alert.alert("Information", '\n' + 'Rating has been submitted', [{text: "Ok", onPress: () => {
        this.props.route.params?.onBackPress()
      }}])
    }, (err) => {
      Alert.alert("Information", `\n${err.message}`);
      this.setState({ loading: false })
    }, "Transaction", "Rate")
  }

  checkPendingTransaction = () => {
    if(this.state.rating > 0 && !this.state.ratesubmitted) {
      Alert.alert(
        '',
        'You have an unsaved rating, are you sure you want to navigate back?',
        [
          {
            text: 'No',
            style: 'cancel',
          },
          {
            text: 'Yes',
            onPress: async () => {
              this.props.route.params?.onBackPress()
              this.props.navigation.goBack()
            },
          },
        ],
        {cancelable: true},
      );
    } else {
      this.props.route.params?.onBackPress()
      this.props.navigation.goBack()
    }
  }

  returnDate = () => {
    return dateFormater(this.state.transaction?.date);
  }

  render() {  
    return (
      <CustomSafeArea>
        <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}
        />
        <CustomHeader 
          title={this.returnDate()} 
          onBackPress={() => this.checkPendingTransaction()} 
          menu={false} 
          backscreen="MyProfile" 
          navigation={this.props.navigation} 
        />
        <View style={{flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
          <View style={{flexDirection: 'row', padding: 13, backgroundColor: Theme.colors.darkerGray}}>
            <View style={{flex: 2}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction?.entry_type_code === "TOPUP" || this.state.transaction?.entry_type_code === "1" || this.state.transaction?.entry_type_desc === "MOBILE APP SIGN UP BONUS" ? "Sales Invoice" : "Transaction ID"}</Text>
            </View>
            <View style={{flex: 1, textAlign: 'right', alignItems: 'flex-end'}}>
              <Text style={{fontFamily: 'Arial', fontSize: 16, color: '#fff'}}>{this.state.transaction?.trans_num}</Text>
            </View>
          </View>
          <View style={{padding: 10, paddingLeft: 13,paddingRight: 13}}>
            <Text style={{fontFamily: 'Arial', color: this.props.app_theme?.theme.colors.text }}>{this.state.transaction?.station || 'APP'}</Text>
          </View>
          <Elements.transactiontable 
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            data={this.state.transaction} 
            // showDiscount={this.state.transaction?.entry_type_code === "P97" || this.state.transaction?.entry_type_code === "THIRDPARTYMOBILE"}
            showDiscount={false}
          />
          <View style={{alignItems: 'center'}}>
            {
              this.state.transaction?.station !== "APP" && <>
              <AdjustableText style={{padding: 20, color: Theme.colors.darkGray}}>Rate Your Experience</AdjustableText>
                <View style={{flexDirection: 'row', alignItems: 'center', width: '60%'}}>
                  {this.renderRatings(this.state.rating ? this.state.rating : this.state.transaction?.rating, this.state.transaction?.is_feedback_disabled || this.state.transaction?.is_disabled || this.state.ratesubmitted)}
                </View>
                <TouchableOpacity 
                  disabled={ this.state.transaction?.is_feedback_disabled || this.state.transaction?.is_disabled || this.state.ratesubmitted } activeOpacity={1}
                  onPress={this.onSubmit}
                  style={{width: '90%', padding: 12, alignItems: 'center', backgroundColor: this.state.rating == 0 || this.state.ratesubmitted ? "" : Theme.colors.primary, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 10, marginTop: 15}}
                >
                  <Text style={{color: this.state.rating == 0 ? Theme.colors.primary : "#fff", fontSize: 16, fontFamily: 'Arial'}}>Submit Rating</Text>
                </TouchableOpacity>
              </>
            }
            <TouchableOpacity onPress={async () => {
              await REQUEST("contact_us", "get", {}, {}, {}, async (res) => {
                if(res.status == 1 && res.data){
                  openComposer({
                    to: res.data.contact_email_address_mobile,
                    subject: `Mobile App Feedback:\nCN${this.state.cn}`,
                    body: ''
                  })
                }
              }, (err) => {
                Alert.alert("Information", `\n${err.message}`);
              }, "ContactOptions", "Fetch"
              )   
            }} style={{width: '90%', padding: 12, alignItems: 'center', marginTop: 15}}>
              <Text style={{color: Theme.colors.primary, fontSize: 16, fontFamily: 'Arial'}}>Send Feedback</Text>
            </TouchableOpacity>
          </View>
        </View>
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(TransactionDetails)