import React, { Component } from 'react';

import { SnackbarHOC, getImageUrl, WordsBtn } from 'educoder';
import { Form, Button, Input   } from 'antd'

import '../../courses/css/Courses.css'
import './common.css'

import axios from 'axios'

const PHONE = 'PHONE'
const EMAIL = 'EMAIL'
const PASSWORD = 'PASSWORD'

function regPhoneAndEmail(value){
  if(value.indexOf("@")>-1){
    // 加密邮箱
    let beforeStr=value.split("@")[0];
    let afterStr=value.split("@")[1];
    return beforeStr.substr(0,3)+"**"+beforeStr.substr(beforeStr.length-1,1)+"@"+afterStr;
  }else{
    // 加密手机号码
    return value.substr(0,3)+"****"+value.substr(7,4);
  }
}
class AccountSecure extends Component {
  constructor (props) {
    super(props)
    this.state = {
      updating: '',
      secondsFlag:false,
      seconds:60
    }
  }

  // 获取验证码倒计时
  remainTime=()=>{
    this.setState({
      seconds: 60
    })
    this.timer = setInterval(() => {
      let { seconds } =this.state;
      let s = parseInt(seconds)-1;
      if(s > -1){
        this.setState({
          seconds:s
        })
      }else{
        this.setState({
          secondsFlag:false
        })
        clearInterval(this.timer);
      }
    },1000)
  }

  // 获取验证码
  getCode=(index)=>{
    let url=`/accounts/get_verification_code.json`
    let login = '';
    let values=this.props.form.getFieldsValue();
    if(index == 3){
      //绑定手机号码
      login=values.phone;
      let reg=/^1\d{10}$/;
      if(reg.test(login)==false){
        this.props.showNotification(`请先输入正确的手机号码`);
        return;
      }
    }else if(index == 4){
      // 绑定邮箱
      login=values.email;
      let reg=/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      if(reg.test(login)==false){
        this.props.showNotification(`请先输入正确的邮箱地址`);
        return;
      }
    }
    let type = index;
    if(!login){ 
      this.props.showNotification(`请先输入${index==3?"手机号码":"邮箱地址"}`);
      return;
    }
    axios.get((url),{params:{
      login,type
    }}).then((result)=>{
      if(result){
        // 倒计时
        this.setState({
          secondsFlag:true
        })
        this.remainTime();
      }
    }).catch((error)=>{
      console.log(error);
    })
  }
// 绑定手机
  onPhoneSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let {login}=this.props.current_user;
        let reg=/^1\d{10}$/;
        if(reg.test(values.phone)){
          let url=`/users/accounts/${login}/phone_bind.json`
          axios.post((url),{
            phone:values.phone,
            code:values.phoneValidateCode
          }).then((result)=>{
            if(result){
              this.props.showNotification("手机号码绑定成功!");
              this.setState({
                updating:''
              })
              this.props.getBasicInfo();
            }
          }).catch((error)=>{
            console.log(error);
          })
        }else{
          this.props.showNotification("请输入有效的11位手机号码");
        }
      }
    })
  }

  // 绑定邮箱
  onEmailSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let {login}=this.props.current_user;
        let reg=/^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        if(reg.test(values.email)){
          let url=`/users/accounts/${login}/email_bind.json`
          axios.post((url),{
            email:values.email,
            code:values.emailValidateCode
          }).then((result)=>{
            if(result){
              this.props.showNotification("邮箱地址绑定成功!");
              this.setState({
                updating:''
              })
              this.props.getBasicInfo();
            }
          }).catch((error)=>{
            console.log(error);
          })
        }else{
          this.props.showNotification("请输入正确的邮箱地址");
        }
      }
    })
  }
  onPasswordSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if(values.p_old == values.p_new){
          this.props.showNotification("新密码不能与旧密码相同！");
          return;
        }
        if(values.p_again != values.p_new){
          this.props.showNotification("两次输入的新密码必须一致！");
          return;
        }
        let {login}=this.props.current_user;
        let url=`/users/accounts/${login}/password.json`;
        axios.put((url),{
          old_password:values.p_old,
          password:values.p_new
        }).then((result)=>{
          if(result){
            this.props.showNotification("密码更新成功!");
            this.setState({
              updating:''
            })
            this.props.getBasicInfo();
          }
        }).catch((error)=>{
          console.log(error);
        })
      }
    })
  }

  //取消编辑
  hideUpdating=()=>{
    this.setState({
      updating:""
    })
  }

  // 修改密码-判断规则
  comfirmNewPassword=(rule,value,callback)=>{
    const { form } = this.props;
    if (value != form.getFieldsValue().p_new) {
      callback("两次输入的新密码必须一致！");
    }else {
      callback();
    }
  }

  InputNewPassword=(rule,value,callback)=>{
    const { form } = this.props;
    if (!value) {
      callback("请输入8-16位字符的新密码，区分大小写！");
    } else if (value.length<8 || value.length>16) {
      callback("请输入8-16位字符的新密码，区分大小写！");
    } else {
      callback();
    }
  }

  render() {
    let {basicInfo}=this.props;
    const { getFieldDecorator } = this.props.form;
    const { updating,seconds,secondsFlag } = this.state
    return (
      <div>
        <div className="basicForm settingForm">
          <style>{`

            .flexRow {
              padding: 20px 0;
            }
              .flexRow .name {
                margin-left: 12px;
                color: #999999;

                text-align: center;
                flex: 0 0 100px;
              }
              .flexRow .description {
                margin-left: 10px;
                flex: 1;
                color: #CDCDCD;
              }
                .description span {
                  margin-right: 20px;
                  color: #05101A;
                }
              .flexRow .status {
                width: 100px;
                color: #28AC7F;
                text-align: right;
              }
            .flexTable .flexTable {
              border-bottom: 1px solid #EBEBEB;
            }
            

            .settingForm label{
              color: #999999;
              font-size: 14px !important ; 
              margin-left: 120px;
            }
            .settingForm input {
              width: 340px;
            }
            .settingForm input.validateInput  {
              width: 220px;
            }
            .settingForm .formItemInline button {
              width: 110px;
              margin-left: 10px;
            }

            .settingForm .ant-form-item-label {
              width: 204px;
            }
            .formItemInline .ant-form-explain{
              position:absolute;
              bottom:-17px;
              left:0px;
              width:100%;
            }
          `}</style>
          <div className="title">安全设置</div>
          <Form>
          <div className="flexTable">
            <div className="flexTable">
              <div className="flexRow">
                <div className="name">手机</div>
                <div className="description">
                  {
                    basicInfo && basicInfo.phone ?
                    <span>{ regPhoneAndEmail(basicInfo.phone) }</span>
                    :
                    <span style={{color: '#EA320E'}}>未绑定</span>
                  }
                  {basicInfo.phone ? '仅自己可见，可用手机号码登录EduCoder' : '绑定手机号码，将获得500金币的奖励哟～，手机号码仅自己可见~'}
                </div>
                {
                  updating != PHONE &&
                  <div className="status">
                    <WordsBtn style="blue" className="borderBottom" 
                        onClick={() => this.setState({updating: PHONE})}
                    >{basicInfo && basicInfo.phone ? "更换" : "立即绑定" }</WordsBtn>
                  </div>
                }
              </div>
              
              { updating == PHONE && 
              <React.Fragment>
              <Form.Item
                label="你的手机号"
                className="formItemInline hideRequireTag mb20"
              >
                {getFieldDecorator('phone', {
                  rules: [{
                    // initialValue: this.state.cityDefaultValue,
                    required: true, 
                    message: `请输入要${basicInfo.phone ? '更换' : '绑定'}的手机号码`,
                  }],
                })(
                  <Input placeholder={`请输入要${basicInfo.phone ? '更换' : '绑定'}的手机号码`}></Input>
                )}
              </Form.Item>

              <Form.Item
                label="手机验证码"
                className="mb20 formItemInline hideRequireTag"
              >
                {getFieldDecorator('phoneValidateCode', {
                  rules: [{
                    // initialValue: this.state.cityDefaultValue,
                    required: true, 
                    message: '请输入手机获取的验证码',
                  }],
                })(
                  <Input placeholder="请输入手机获取的验证码" className="validateInput"></Input>
                )}
                <Button type="primary" disabled={ secondsFlag } onClick={()=>this.getCode(3)}>
                { !secondsFlag ? "获取验证码":`重新发送${seconds}s`}
                </Button>
              </Form.Item>

              <div className="mb20" style={{ marginLeft: '204px' }}>
                <Button type="primary" onClick={this.onPhoneSubmit}>确定</Button>
                <Button type="primary grayBtn" style={{ marginLeft: '20px'}} onClick={this.hideUpdating}>取消</Button>
              </div>
              </React.Fragment> }
            </div>
            
            <div className="flexTable">
              <div className="flexRow">
                <div className="name">邮箱</div>
                <div className="description">
                  {
                    basicInfo && basicInfo.mail ?
                    <span>{ regPhoneAndEmail(basicInfo.mail) }</span>
                    :
                    <span style={{color: '#EA320E'}}>未绑定</span>
                  }
                  邮箱账号仅自己可见，可用于邮箱账号登录EduCoder 
                </div>
                {
                  updating != EMAIL &&
                  <div className="status">
                    <WordsBtn style="blue" className="borderBottom"
                      onClick={() => this.setState({updating: EMAIL})}
                    >{basicInfo && basicInfo.mail ?"更换":"立即绑定"}</WordsBtn>
                  </div>
                }
              </div>  
              
              { updating == EMAIL && 
              <React.Fragment>
              <Form.Item
                label="邮箱地址"
                className="formItemInline hideRequireTag mb20"
              >
                {getFieldDecorator('email', {
                  rules: [{
                    // initialValue: this.state.cityDefaultValue,
                    required: true, 
                    message: basicInfo && basicInfo.mail ?'请输入要更换的新邮箱地址':'请输入邮箱地址',
                  }],
                })(
                  <Input placeholder={`${basicInfo && basicInfo.mail ?'请输入要更换的新邮箱地址':'请输入邮箱地址'}`}></Input>
                )}
              </Form.Item>

              <Form.Item
                label="邮箱验证码"
                className="mb20 formItemInline hideRequireTag"
              >
                {getFieldDecorator('emailValidateCode', {
                  rules: [{
                    // initialValue: this.state.cityDefaultValue,
                    required: true, 
                    message: '请输入邮箱收到的验证码',
                  }],
                })(
                  <Input placeholder="请输入邮箱收到的验证码" className="validateInput"></Input>
                )}
                <Button type="primary" disabled={ secondsFlag } onClick={()=>this.getCode(4)}>
                { !secondsFlag ? "获取验证码":`重新发送${seconds}s`}</Button>
              </Form.Item>

              <div className="mb20" style={{ marginLeft: '204px' }}>
                <Button type="primary" onClick={this.onEmailSubmit}>确定</Button>
                <Button type="primary grayBtn" style={{ marginLeft: '20px'}} onClick={this.hideUpdating}>取消</Button>
              </div>
              </React.Fragment>  }

            </div>


            <div className="flexTable">
              <div className="flexRow">
                <div className="name">密码</div>
                <div className="description">
                  <span>**********</span>
                  用于保护账户信息和登录安全 
                </div>
                { 
                  updating != PASSWORD &&
                  <div className="status">
                    <WordsBtn style="blue" className="borderBottom"
                        onClick={() => this.setState({updating: PASSWORD})}
                    >修改</WordsBtn>
                  </div>
                }
              </div> 
              
              { updating == PASSWORD && 
              <React.Fragment>
              <Form.Item
                label="旧密码"
                className="mb20 formItemInline hideRequireTag"
              >
                {getFieldDecorator('p_old', {
                  rules: [{
                    // initialValue: this.state.cityDefaultValue,
                    required: true, 
                    message: '请设置8～16位密码，区分大小写',
                  }],
                })(
                  <Input type="password" placeholder="请设置8～16位密码，区分大小写" autoComplete="new-password"></Input>
                )}
              </Form.Item>

              <Form.Item
                label="新密码"
                className="mb20 formItemInline hideRequireTag"
              >
                {getFieldDecorator('p_new', {
                  rules: [{
                    validator:this.InputNewPassword
                  }],
                })(
                  <Input type="password" placeholder="请输入8～16位的新密码，区分大小写" autoComplete="new-password"></Input>
                )}
              </Form.Item>

              <Form.Item
                label="再次输入"
                className="mb20 formItemInline hideRequireTag"
              >
                {getFieldDecorator('p_again', {
                  rules: [{
                    // initialValue: this.state.cityDefaultValue,
                    required: true, 
                    message: '请再次输入新密码',
                  },{
                    validator:this.comfirmNewPassword
                  }],
                })(
                  <Input type="password" placeholder="请再次输入新密码" autoComplete="new-password"></Input>
                )}
              </Form.Item>

              <div className="mb20" style={{ marginLeft: '204px' }}>
                <Button type="primary" onClick={this.onPasswordSubmit}>确定</Button>
                <Button type="primary grayBtn" style={{ marginLeft: '20px'}} onClick={this.hideUpdating}>取消</Button>
              </div>
              </React.Fragment> }
            </div>

          </div>
          </Form>
        </div>
        <div style={{color: '#989898', marginLeft: '20px'}}>* 我们确保你所提供的信息均处于严格保密状态，不会泄露</div>
      </div>
    );
  }
}
const WrappedAccountSecure = Form.create({ name: 'AccountSecure' })(AccountSecure);

export default WrappedAccountSecure;