import React, { Component } from 'react';
import './index.less';
import FileUpload from '@src/components/FileUpload';
import Assets from '@src/components/Assets';
import { SelectInput, VerificationInput, Input } from '../Login';
import { MobileArea } from '../../../Constant';
import Invite from '../Invite';
import Modal from '../Modal';

export class BindPhone extends Component {
  constructor(props) {
    super(props);
    this.state = { step: 0, data: {} };
    this.stepProp = {
      0: {
        title: '绑定手机',
        onConfirm: () => this.onNext(),
      },
      1: {
        title: '绑定手机',
        onConfirm: props.onConfirm,
        onCancel: props.onCancel,
        confirmText: '提交',
      },
    };
  }

  onNext() {
    this.setState({ step: 1 });
  }

  render() {
    const { show } = this.props;
    const { step } = this.state;
    return (
      <Modal className="bind-phone-modal" show={show} width={630} {...this.stepProp[step]}>
        <div className="bind-phone-modal-wrapper">{this[`renderStep${step}`]()}</div>
      </Modal>
    );
  }

  renderStep0() {
    return (
      <div className="step-0-layout">
        已绑定手机 13123123123123
        <a onClick={() => this.onNext()}>修改</a>
      </div>
    );
  }

  renderStep1() {
    return (
      <div className="step-1-layout">
        <div className="label">手机号</div>
        <div className="input-layout">
          <SelectInput
            placeholder="请输入手机号"
            selectValue={this.state.data.area}
            select={MobileArea}
            value={this.state.data.mobile}
            error={this.state.mobileError}
            onSelect={value => {
              this.changeData('area', value);
              this.validMobile(true);
            }}
            onChange={e => {
              this.changeData('mobile', e.target.value);
              this.validMobile(true);
            }}
          />
          <VerificationInput
            placeholder="请输入验证码"
            value={this.state.data.mobileVerifyCode}
            error={this.state.validError}
            onSend={() => {
              return this.sendValid();
            }}
            onChange={e => {
              this.changeData('mobileVerifyCode', e.target.value);
            }}
          />
        </div>
      </div>
    );
  }
}

export class BindEmail extends Component {
  constructor(props) {
    super(props);
    this.state = { step: 0, data: {} };
    this.stepProp = {
      0: {
        title: '绑定手机',
        onConfirm: () => this.onNext(),
      },
      1: {
        title: '绑定手机',
        onConfirm: props.onConfirm,
        onCancel: props.onCancel,
        confirmText: '提交',
      },
    };
  }

  onNext() {
    this.setState({ step: 1 });
  }

  render() {
    const { show } = this.props;
    const { step } = this.state;
    return (
      <Modal className="bind-email-modal" show={show} width={630} {...this.stepProp[step]}>
        <div className="bind-email-modal-wrapper">{this[`renderStep${step}`]()}</div>
      </Modal>
    );
  }

  renderStep0() {
    return (
      <div className="step-0-layout">
        已绑定邮箱 13123123123123
        <a onClick={() => this.onNext()}>修改</a>
      </div>
    );
  }

  renderStep1() {
    return (
      <div className="step-1-layout">
        <div className="label">邮箱地址</div>
        <div className="input-layout">
          <Input
            placeholder="请输入邮箱"
            value={this.state.data.mobile}
            error={this.state.mobileError}
            onChange={e => {
              this.changeData('mobile', e.target.value);
              this.validMobile(true);
            }}
          />
        </div>
      </div>
    );
  }
}

export class EditInfo extends Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }

  render() {
    const { show, onCancel, onConfirm } = this.props;
    return (
      <Modal
        className="edit-info-modal"
        show={show}
        width={630}
        title="修改资料"
        confirmText="保存"
        onCancel={onCancel}
        onConfirm={onConfirm}
      >
        <div className="edit-info-modal-wrapper">
          <div className="edit-info-modal-block">
            <div className="label">昵称</div>
            <div className="input-layout">
              <Input
                placeholder="2-20位，不可使用特殊字符。"
                value={this.state.data.mobile}
                error={this.state.mobileError}
                onChange={e => {
                  this.changeData('mobile', e.target.value);
                  this.validMobile(true);
                }}
              />
            </div>
          </div>
          <div className="edit-info-modal-block">
            <div className="label">头像</div>
            <div className="input-layout">
              <FileUpload />
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}

export class RealAuth extends Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }

  render() {
    const { show, onConfirm } = this.props;
    return (
      <Modal
        className="real-auth-modal"
        show={show}
        width={630}
        title="实名认证"
        confirmText="好的，知道了"
        btnAlign="center"
        onConfirm={onConfirm}
      >
        <div className="real-auth-modal-wrapper">
          <div className="real-auth-text">
            <div className="t1">完成实名认证即可领取：</div>
            <div className="t2">6个月VIP权限 和 5折机经优惠劵。</div>
            <div className="t3">扫码关注公众号，点击“我的-实名认证”</div>
          </div>
          <div className="real-auth-qrcode">
            <Assets name="qrcode" />
          </div>
        </div>
      </Modal>
    );
  }
}

export class EditAvatar extends Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }

  render() {
    const { show, onConfirm, onCancel } = this.props;
    return (
      <Modal
        className="edit-avatar-modal"
        show={show}
        width={630}
        title="调整头像"
        confirmText="保存头像"
        onConfirm={onConfirm}
        onCancel={onCancel}
      >
        <div className="edit-avatar-modal-wrapper">
          <div className="edit-avatar-o">
            <Assets name="qrcode" />
          </div>
          <div className="edit-avatar-r">
            <div className="text">头像预览</div>
            <Assets name="qrcode" />
          </div>
        </div>
      </Modal>
    );
  }
}

export class InviteModal extends Component {
  constructor(props) {
    super(props);
    this.state = { data: {} };
  }

  render() {
    const { show, onClose } = this.props;
    return (
      <Modal className="invite-modal" show={show} width={630} title="邀请好友" onClose={onClose}>
        <div className="invite-modal-wrapper">
          <div className="tip">每邀请一位小伙伴加入“千行GMAT”, 您的VIP权限会延长7天，可累加 无上限！赶紧行动吧~</div>
          <Invite />
        </div>
      </Modal>
    );
  }
}