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

import login_css from './login_css';
import public_css from '../../source/css/public_css';
import {CheckPassword, CheckPhoneNumber} from '../../source/inspect/inspect';
import {RequestNetwork} from '../../data/encryption';
import {ToastShow} from '../../components/toast/toast';
import {WhiteSpace, WingBlank} from '@ant-design/react-native';

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

  render() {
    return (
      <View style={[public_css.body]}>
        <View style={public_css.body}>
          <View style={login_css.bg}>
            <View style={login_css.login_bg_img}>
              <Image
                source={require('../../source/img/login/login_bg.png')}
                style={login_css.bgImg}
                resizeMode="cover"
              />
            </View>
            <View style={login_css.full_box}>
              <ScrollView style={login_css.inner_con}>
                <WhiteSpace />
                <WingBlank>
                  <View style={login_css.input_item}>
                    <Text style={login_css.text_label}>手机号</Text>
                    <TextInput
                      style={login_css.text_input}
                      placeholder="请输入您的手机号码"
                      clearButtonMode="while-editing"
                      secureTextEntry={false}
                      onChangeText={(text) => {
                        this.setState({
                          phone: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={login_css.input_item}>
                    <Text style={login_css.text_label}>密码</Text>
                    <TextInput
                      style={login_css.text_input}
                      placeholder="请输入您的密码"
                      clearButtonMode="while-editing"
                      secureTextEntry
                      onChangeText={(text) => {
                        this.setState({
                          user_password: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={login_css.input_item}>
                    <Text style={login_css.text_label}>确认密码</Text>
                    <TextInput
                      style={login_css.text_input}
                      placeholder="再次输入您的密码"
                      clearButtonMode="while-editing"
                      secureTextEntry
                      onChangeText={(text) => {
                        this.setState({
                          user_password_again: text,
                        });
                      }}
                    />
                  </View>
                </WingBlank>
                <WingBlank>
                  <View style={login_css.input_item}>
                    <Text style={login_css.text_label}>验证码</Text>
                    <TextInput
                      style={login_css.text_input}
                      placeholder="请输入您的短信验证码"
                      clearButtonMode="while-editing"
                      onChangeText={(text) => {
                        this.setState({
                          verification_code: text,
                        });
                      }}
                    />
                    <TouchableOpacity
                      style={login_css.vertify}
                      disabled={this.state.isDisable}
                      onPress={this._beginCountDown.bind(this)}>
                      <Text style={login_css.texts}>
                        {this.state.begin === 0
                          ? '获取验证码'
                          : this.state.timeLeft + '秒后重试'}
                      </Text>
                    </TouchableOpacity>
                  </View>
                </WingBlank>
                <TouchableOpacity
                  style={login_css.button}
                  onPress={() => this.verificationCode()}>
                  <View style={login_css.buttonView}>
                    <Text style={login_css.buttonText}>修改密码</Text>
                  </View>
                </TouchableOpacity>
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
              </ScrollView>
            </View>
          </View>
        </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 RequestNetwork(
        url,
        token,
        {
          phoneNo: this.state.phone,
        },
        false,
        1,
      );
      if (response) {
        ToastShow(1, '验证码发送成功!');
      } else {
        ToastShow(1, '验证码发送失败!');
      }
    } else {
      ToastShow(1, msg);
    }
  };

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

  //提交修改密码数据
  submitData = async () => {
    const url = '/auth/comm/user/forgotpwd';
    let token = null;
    let response = await RequestNetwork(
      url,
      token,
      {
        mobile: this.state.phone,
        password: this.state.user_password,
        confirmPassword: this.state.user_password_again,
        smsCode: this.state.verification_code,
        reqChannel: 3,
      },
      false,
      1,
    );
    if (response) {
      // setInterval(() => {
      //   this.setState({
      //     spinner: isLoading,
      //   });
      // }, 3000);
      ToastShow(1, '修改密码成功!');
    } else {
      ToastShow(1, '忘记密码失败，请重试!');
    }
  };
}