import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import { getMap, formatDate } from '@src/services/Tools';
import { SpecialRadioGroup } from '../Radio';
import Modal from '../Modal';
import Button from '../Button';
import TotalSort from '../TotalSort';
import Date from '../Date';
import Ratio from '../Ratio';
import { My } from '../../stores/my';
import { PrepareStatus, PrepareExaminationTime } from '../../../Constant';

const PrepareStatusMap = getMap(PrepareStatus, 'value', 'short');
const PrepareExaminationTimeMap = getMap(PrepareExaminationTime, 'value', 'label');

export default class extends Component {
  constructor(props) {
    super(props);
    this.stepProp = {
      0: {
        title: '我的身份',
      },
      1: {
        title: '下次考试时间',
      },
      2: {
        title: '目标成绩',
      },
      3: {
        title: '最晚出分时间(选填)',
      },
      4: {
        title: '备考信息',
        onConfirm: props.onConfirm,
        onCancel: props.onCancel,
        confirmText: '关闭',
        cancelText: '修改',
      },
    };
    this.state = { step: 0, data: {} };
    My.getPrepare()
      .then(result => {
        this.setState({ data: result, first: !result.prepareStatus });
      });
  }

  onChange(type, key) {
    const { data, step } = this.state;
    data[type] = key;
    this.setState({ data, step: step + 1 });
  }

  onPrev() {
    const { step } = this.state;
    this.setState({ step: step - 1 });
  }

  onNext() {
    const { step } = this.state;
    this.setState({ step: step + 1 });
  }

  submitPrepare() {
    const { data } = this.state;
    My.editPrepare(data)
      .then(result => {
        this.setState({ result });
        this.onNext();
      });
  }

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

  renderStep0() {
    const { data } = this.state;
    const { prepareStatus } = data;
    return (
      <div className="step-0-layout">
        <SpecialRadioGroup
          list={PrepareStatus}
          value={prepareStatus}
          width={190}
          space={10}
          onChange={key => this.onChange('prepareStatus', key)}
        />
        <div className="action-layout">
          <div className="next" onClick={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep1() {
    const { data } = this.state;
    const { prepareExaminationTime } = data;
    return (
      <div className="step-1-layout">
        <SpecialRadioGroup
          list={PrepareExaminationTime}
          value={prepareExaminationTime}
          width={195}
          space={10}
          onChange={key => this.onChange('prepareExaminationTime', key)}
        />
        <div className="action-layout">
          <div className="prev" onClick={() => this.onPrev()}>
            <Icon type="left-circle" theme="filled" />
            上一题
          </div>
          <div className="next" onClick={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep2() {
    return (
      <div className="step-2-layout">
        <TotalSort />
        <div className="action-layout">
          <div className="prev" onClick={() => this.onPrev()}>
            <Icon type="left-circle" theme="filled" />
            上一题
          </div>
          <div className="next" onClick={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep3() {
    return (
      <div className="step-3-layout">
        <Date />
        <div className="action-layout">
          <div className="prev" onClick={() => this.onPrev()}>
            <Icon type="left-circle" theme="filled" />
            上一题
          </div>
          <Button size="lager" radius onClick={() => {
            this.submitPrepare();
          }}>
            提交
          </Button>
        </div>
      </div>
    );
  }

  renderStep4() {
    const { first, data } = this.state;
    return (
      <div className="step-4-layout">
        {first && <div className="tip">
          <Icon type="check" />
          7天VIP权限已赠送至您的账户。
        </div>}
        <Ratio
          text="身份"
          subtext={PrepareStatusMap[data.prepareStatus]}
          values={[
            { label: '学生-D; 20%', value: 10, color: '#41A6F3' },
            { label: '学生-O; 20%', value: 20, color: '#3F86EA' },
            { label: '在职-D; 20%', value: 20, color: '#41A6F3' },
            { label: '在职-O; 20%', value: 20, color: '#6DC0FF' },
            { label: 'Gap Year; 20%', value: 20, color: '#9BD4FF' },
          ]}
        />
        <Ratio
          text="考试时间"
          subtext={PrepareExaminationTimeMap[data.prepareExaminationTime]}
          values={[
            { label: '近1个月; 20%', value: 10, color: '#6865FD' },
            { label: '近2个月; 20%', value: 20, color: '#322EF2' },
            { label: '近3个月; 20%', value: 20, color: '#8F65FF' },
            { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
          ]}
        />
        <Ratio
          text="目标成绩"
          subtext={`${data.prepareGoal}分`}
          values={[
            { label: '600+； 20%', value: 10, color: '#2754E0' },
            { label: '650+； 20%', value: 20, color: '#3F86EA' },
            { label: '700+； 20%', value: 20, color: '#41A6F3' },
            { label: '700+； 20%', value: 20, color: '#6DC0FF' },
          ]}
        />
        <Ratio
          text="出分日期"
          subtext={`${formatDate(data.prepareScoreTime, 'YYYY-MM')}`}
          values={[
            { label: '近1个月; 20%', value: 10, color: '#6865FD' },
            { label: '近2个月; 20%', value: 20, color: '#322EF2' },
            { label: '近3个月; 20%', value: 20, color: '#8F65FF' },
            { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
            { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
            { label: '1年内; 20%', value: 20, color: '#8F65FF' },
            { label: '不清楚', value: 20, color: '#C3C1D1' },
          ]}
        />
      </div>
    );
  }
}