import * as React from 'react';
import { 
  TouchableOpacity, 
  View, 
  Text, 
  Image, 
  Alert, 
  Platform 
} from 'react-native';
import { savePlainUserInfo } from "../../redux/actions/AppUserInfoActions";
import { openModal } from '../../redux/actions/AlertActions';
import { connect } from "react-redux";
import NetInfo from "../../components/netstatus";
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 DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomInput from '../../components/custominput';
import CustomSafeArea from '../../components/safeArea.component';

class AddAccountCard extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    profile: {},
    loading: false,
    cardnumber: "",
    valid: false,
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = () => {
    this.setState({ profile: this.props.route.params.data })
  }

  setCardNumber = (cn) => {
    this.setState({ valid: cn.length == 16 ? true : false })
  }

  submitAddAccountCard = async () => {
    let accounts = await DB.accounts();
    let included = accounts.find((account) => {
      return account.data.card_number === this.state.cardnumber
    })
    if(included != undefined && included != null){
      Platform.OS == 'ios' ? setTimeout(() => {
        this.props.openModal({
          open: true,
          title: "Information",
          body: "Account has already been added previously in your profile. Would you like to switch to that account now?",
          yesCB: async () => {
            let process = await DB.switchaccount(0, this.state.cardnumber)
            if(process == true){
              this.props.savePlainUserInfo(included).then(res => {
                // DB.updateProfile(res, function(){}, function(error){})
              })

              this.props.openModal({
                open: true,
                title: "Account",
                body: "Successfully switched to account",
                yesButtonOnly: true,
                yesText: "Okay",
                theme: this.props.app_theme
              })
              
              setTimeout(() => {
                this.props.navigation.reset({
                  index: 0,
                  routes: [{name: 'Main'}],
                });
              }, 700);
            } else {
              Alert.alert("Information", '\n' + JSON.stringify(process))
            }
          },
          theme: this.props.app_theme
        })
      }, 300) : Alert.alert("Information", '\n' + res.message)
    } else {
      this.setState({ loading: true })
      this.validateCard(success => {
        if(success.status == 1) {
          let sessiondata = {
            card_number: success.data.card_number,
            lcard_uuid: success.data.user_id,
            mobile_number: success.data.number
          }

          this.requestOTP(sessiondata.lcard_uuid, sessiondata.mobile_number, success => {
            this.setState({ loading: false })
            if(success.status == 1) {
              this.props.navigation.navigate("AccountOtp", {
                data: sessiondata, 
                callback: this.props.route.params?.callback, 
                type: this.props.route.params?.type
              })
            }
          }, err => {
            Alert.alert("Information", `\n${err.message}`);
            this.setState({ loading: false })
          })
        } else {
          this.setState({ loading: false })
          Platform.OS == 'ios' ? setTimeout(() => {
            Alert.alert("Information", '\n' + success.message)
          }, 300) : Alert.alert("Information", '\n' + success.message)
        }
      }, err => {
        Alert.alert("Information", `\n${err.message}`);
        this.setState({ loading: false })
      })
    }
  }

  validateCard = async (successCallback, errorCallback) => {
    let uuid = await DB.get("deviceUUID")
    await REQUEST("card_validation", "post", {}, {}, {
      card_number: this.state.cardnumber,
      deviceUUID: uuid
    }, function(res){
      successCallback(res)
    }, function(error){
      errorCallback(error)
    }, "CardValidationEnroll", "Submit")
  }

  onSubmit = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected){
        if(this.state.valid) this.submitAddAccountCard()
      }else{
        Elements.nointernet2(this.props)
      }
    })
  }

  requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
    this.setState({ loading: true })
    let params = `lcard_uuid=${lcard_uuid}&mobile=${Theme.formatter.PMBL(mobile_number)}&is_resend=false`;
    await REQUEST("requestOTP", "get", {}, params, {}, 
      function(res){
          successCallback(res)
      }, function(error){
          errorCallback(error)
      }, "OTP", "Request"
    )
  }

  render() {
    return (
      <CustomSafeArea>
        {/* <Elements.customAlertModal
          open={this.state.openModal.open}
          description={this.state.openModal.track}
          onProceed={() => {
            setOpenModal({
              open: false,
              track: undefined
            })
          }}
          onClose={() => setOpenModal({
            open: false,
            track: undefined
          })}
        /> */}
        <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="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
          <View style={{flex: 1}}> 
            <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
              <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
            </View>
            <View style={{flex: 1, alignItems: 'center'}}>
              <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text>
              <Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
                Enter your 16-digit card number.
              </Text>
              <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}> 
                <CustomInput 
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  onChangeText={(val) => {
                    this.setState({ cardnumber: val, valid: val.length == 16 ? true : false })
                  }}
                />
              </View>
              <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
                <TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
                  <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
                </TouchableOpacity>
              </View>
              <View style={{alignItems: 'center'}}>
                <Text style={{fontSize: 16, fontFamily: 'Arial', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>or</Text>
              </View>          
              <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, marginTop: 5}}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate("AccountEnrollActivate", {callback: this.props.route.params.callback, type: "activatecard"}) } style={{padding: 15, paddingTop: 12, width: Theme.screen.w - 80, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.primary}}>
                  <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.primary}}>Activate your Card</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
      </CustomSafeArea>
    )
  }
}

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

const mapDispatchToProps = {
  savePlainUserInfo,
  openModal
}

export default connect(mapStateToProps, mapDispatchToProps)(AddAccountCard);