import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity, Image} from 'react-native';

import public_css from '../../source/css/public_css';

import {CheckPassword, CheckPhoneNumber} from '../../source/inspect/inspect';
import {GetDataPost} from '../../data/encryption';
import {ShowToast} from '../../components/rootToast/root_toast';
import {ClearAll, RetrieveData} from '../../data/storage';

export default class change_phone extends Component {
  constructor(props) {
    super(props);
    this.afterEnd = this._afterEnd;
    this.state = {
      phone: '',
      user_password: '',
      verification_code: '',
      token: '',
      timeLeft: 60,
      begin: 0,
      isDisable: false,
    };
  }

  render() {
    return (
      <View style={[public_css.body]}>
        <View
          style={{
            alignItems: 'center',
            flex: 1,
          }}>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>*新手机号:</Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入新的手机号码"
              clearButtonMode="while-editing"
              secureTextEntry={false}
              onChangeText={text => {
                this.setState({
                  phone: text,
                });
              }}
            />
          </View>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>*密码:</Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入密码"
              clearButtonMode="while-editing"
              secureTextEntry
              onChangeText={text => {
                this.setState({
                  user_password: text,
                });
              }}
            />
          </View>
          <View style={[public_css.view, public_css.lineTopBottom]}>
            <Text style={public_css.text}>*验证码:</Text>
            <TextInput
              style={public_css.textInputStyle}
              placeholder="请输入验证码"
              clearButtonMode="while-editing"
              secureTextEntry
              onChangeText={text => {
                this.setState({
                  verification_code: text,
                });
              }}
            />
            <TouchableOpacity
              disabled={this.state.isDisable}
              onPress={this._beginCountDown.bind(this)}>
              <Text style={{lineHeight: 44, fontSize: 16, color: '#1874CD'}}>
                {this.state.begin === 0
                  ? '获取验证码'
                  : this.state.timeLeft + '秒后重试'}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={[public_css.bottomStaus]}>
          <TouchableOpacity
            style={[public_css.statusBtn, public_css.statusRBtn]}
            onPress={() => this.verificationCode()}>
            <Image
              source={require('../../source/img/productImg/confirm.png')}
              style={{width: 32, height: 32}}
            />
            <Text style={{color: '#fff'}}>确认</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  //开始验证码计时
  _beginCountDown() {
    if (this.state.begin === 1) {
      return;
    }
    let time = this.state.timeLeft;
    let afterEnd = this.afterEnd;
    let begin = this.state.begin;
    this.countDownInfo(time, afterEnd, begin);
    this.sendVerificationCode();
  }

  //更新验证码状态
  countDownInfo(time, callback, begin) {
    if (time > 0) {
      this.state.begin = 1;
      let that = this;
      let interval = setInterval(function() {
        if (that.state.timeLeft < 1) {
          clearInterval(interval);
          callback(that);
          that.setState({
            isDisable: false,
          });
        } else {
          let totalTime = that.state.timeLeft;
          that.setState({
            timeLeft: totalTime - 1,
            isDisable: true,
          });
        }
      }, 1000);
    }
  }

  //提交登录信息
  sendVerificationCode = async () => {
    let {status, msg} = CheckPhoneNumber(`${this.state.phone}`);
    if (status) {
      const url = '/sms/getSmscode';
      let token = null;
      let response = await GetDataPost(
        url,
        token,
        {
          phoneNo: this.state.phone,
        },
        false,
        1,
      );
      if (response) {
        ShowToast('验证码发送成功！');
      } else {
        ShowToast('验证码发送失败！');
      }
    } else {
      ShowToast(msg);
    }
  };

  //验证短信验证码是否正确
  verificationCode = async () => {
    if (this.state.verification_code == '') {
      ShowToast('验证码不能为空！');
      return;
    }
    let {status, msg} = CheckPhoneNumber(`${this.state.user_name}`);
    if (status) {
      let {status, msg} = CheckPassword(`${this.state.user_password}`);
      if (status) {
        const url = '/sms/matchSmscode';
        let token = null;
        let response = await GetDataPost(
          url,
          token,
          {
            phoneNo: this.state.phone,
            smscode: this.state.verification_code,
          },
          false,
          1,
        );
        if (response) {
          this.submitData();
        } else {
          ShowToast('验证码不正确！');
        }
      } else {
        ShowToast(msg);
      }
    } else {
      ShowToast(msg);
    }
  };

  //提交修改密码数据
  submitData = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      const url = '/auth/comm/user/modifyMobile';
      let response = await GetDataPost(
        url,
        token,
        {
          oriMobile: account,
          mobile: this.state.phone,
          password: this.state.user_password,
          smsCode: this.state.verification_code,
          reqChannel: 3,
          ip: '',
        },
        false,
        1,
      );
      if (response) {
        if (response.code == 0) {
          ShowToast('修改成功！');
          await ClearAll();
          this.props.navigation.popToTop();
        }
      } else {
        ShowToast('服务器故障！');
      }
    }
  };
}