import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import { Checkbox } from 'antd';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import Button from '../../../components/Button';
import Navigation from '../../../components/Navigation';
import Answer from '../../../components/Answer';
import Calculator from '../../../components/Calculator';
import AnswerSelect from '../../../components/AnswerSelect';
import AnswerTable from '../../../components/AnswerTable';
import { Question } from '../../../stores/question';
import Editor from '../../../components/Editor';

export default class extends Page {
  initState() {
    return {
      showCalculator: false,
      start: !this.props.core.query.r,
      reportId: this.props.core.query.r,
      type: this.props.core.query.type,
      disorder: false,
      step: 0,
      info: {},
      reportInfo: {},
      questionInfo: {},
      answer: {},
      modal: null,
    };
  }

  initData() {
    const { start } = this.state;
    Question.getPaper(this.params.id).then(result => {
      this.setState({ info: result });
    });
    if (!start) {
      this.continue();
    }
  }

  onChangeQuestion(index, value) {
    const { question = {}, answer = {} } = this.state;
    answer.questions[index] = { [question.type]: value };
    this.setState({ answer });
  }

  onChangeAwa(value) {
    const { answer = {} } = this.state;
    answer.awa = value;
    this.setState({ answer });
  }

  start() {
    const { type, info, disorder } = this.state;
    Question.start(type, info.id, disorder).then(result => {
      this.setState({ reportInfo: result });
      this.next();
    });
  }

  continue() {
    const { reportId } = this.state;
    Question.continue(reportId).then(result => {
      this.setState({ reportInfo: result });
      this.next();
    });
  }

  next() {
    const { reportInfo } = this.state;
    Question.next(reportInfo.id).then(result => {
      this.setState({
        questionInfo: result,
        question: result.question,
        answer: { questions: [], subject: [], predicate: [], object: [], options: [], awa: '' },
      });
    });
  }

  submit() {
    const { question, answer } = this.state;
    if (!this.checkAnswer()) return;
    Question.submit(question.questionNoId, answer).then(() => {
      this.next();
    });
  }

  finish() {
    const { reportInfo } = this.state;
    Question.finish(reportInfo.id).then(() => {
      this.showToast(null, 'Complete!', () => {
        goBack();
      });
    });
  }

  showConfirm(title, desc, cb) {
    this.showModal('confirm', title, desc, cb);
  }

  showToast(title, desc, cb) {
    this.showModal('toast', title, desc, cb);
  }

  showModal(type, title, desc, cb) {
    this.setState({ modal: { type, title, desc, cb } });
  }

  checkAnswer() {
    const { question, answer } = this.state;
    let result = null;
    if (question.type === 'awa' && !answer.awa) result = 'Please answer the question first.';
    if (result) return this.showToast(null, result);
    return true;
  }

  hideModal(b) {
    if (b) {
      const { modal = {} } = this.state;
      if (modal.cb) modal.cb();
    }
    this.setState({ modal: null });
  }

  formatStrem(text) {
    if (!text) return '';
    const { question = { content: {} } } = this.state;
    const { table = {}, questions = [] } = question.content;
    text = text.replace(/#select#/g, "<span class='#select#' />");
    text = text.replace(/#table#/g, "<span class='#table#' />");
    setTimeout(() => {
      const selectList = document.getElementsByClassName('#select#');
      const tableList = document.getElementsByClassName('#table#');
      for (let i = 0; i < selectList.length; i += 1) {
        ReactDOM.render(
          <AnswerSelect list={questions[i].select} onChange={v => this.onChangeQuestion(i, v)} />,
          selectList[i],
        );
      }
      for (let i = 0; i < tableList.length; i += 1) {
        ReactDOM.render(<AnswerTable list={table.header} columns={table.header} data={table.data} />, tableList[i]);
      }
    }, 1);
    return text;
  }

  renderView() {
    const { start } = this.state;
    if (start) return this.renderStart();
    return this.renderDetail();
  }

  renderContent() {
    const { question = { content: {} }, step } = this.state;
    const { steps = [] } = question.content;
    return (
      <div className="block block-content">
        {steps.length > 0 && <Navigation list={question.content.steps} active={step} onChange={() => {}} />}
        <div className="text">{this.formatStrem(steps.length > 0 ? steps[step].stem : question.stem)}</div>
      </div>
    );
  }

  renderAnswer() {
    const { question = { content: {} } } = this.state;
    const { questions = [] } = question.content;
    if (question.type === 'inline') return '';
    return (
      <div className="block block-answer">
        {question.type === 'awa' && <Editor onChange={v => this.onChangeAwa(v)} />}
        {questions.map((item, index) => {
          return (
            <div>
              <div className="text m-b-2">{item.description}</div>
              <Answer
                list={item.select}
                type={question.type}
                direction={question.direction}
                onChange={v => this.onChangeQuestion(index, v)}
              />
            </div>
          );
        })}
      </div>
    );
  }

  renderDetail() {
    const { modal, showCalculator, info, question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    return (
      <div className="layout">
        <div className="fixed">
          Analytical Writing Assessment
          <Assets
            className="calculator-icon"
            name="calculator_icon"
            onClick={() => this.setState({ showCalculator: !showCalculator })}
          />
          <Assets className="collect-icon" name="collect_icon" />
        </div>
        <Calculator show={showCalculator} />
        <div className="layout-header">
          <div className="title">{info.title}</div>
          <div className="right">
            <div className="block">
              <Assets name="timeleft_icon" />
              Time left 00:02
            </div>
            <div className="block">
              <Assets name="subjectnumber_icon" />
              {question.no} of {info.questionNumer}
            </div>
          </div>
        </div>
        <div className={`layout-body ${typeset}`}>
          {this.renderContent()}
          {this.renderAnswer()}
        </div>
        <div className="layout-footer">
          <div className="help">
            <Assets name="help_icon" />
            Help
          </div>
          <div className="full">
            <Assets name="fullscreen_icon" />
          </div>
          <div className="next" onClick={() => this.next()}>
            Next
            <Assets name="next_icon" />
          </div>
        </div>
        {modal ? this.renderModal() : ''}
      </div>
    );
  }

  renderStart() {
    const { info, disorder, modal } = this.state;
    return (
      <div className="start">
        <div className="bg" />
        <div className="fixed-content">
          <div className="title">{info.title}</div>
          <div className="desc">
            <div className="block">
              <div className="desc-title">
                <Assets name="subject_icon" />
                题目总数
              </div>
              <div className="desc-info">{info.questionNumer}</div>
            </div>
            <div className="block">
              <div className="desc-title">
                <Assets name="time_icon" />
                建议用时
              </div>
              <div className="desc-info">{info.time}</div>
            </div>
          </div>
          <div className="tip">
            <Checkbox className="m-r-1" checked={disorder} onChange={() => this.setState({ disorder: !disorder })} />
            题目选项乱序显示
          </div>
          <div className="submit">
            <Button size="lager" radius onClick={() => this.start()}>
              开始练习
            </Button>
          </div>
        </div>
        {modal ? this.renderModal() : ''}
      </div>
    );
  }

  renderModal() {
    const { modal } = this.state;
    return (
      <div className="modal">
        <div className="mask" />
        <div className="body">
          <div className="title">{modal.title}</div>
          <div className="desc">{modal.desc}</div>
          {modal.type === 'confirm' ? (
            <div className="btn-list">
              <div className="btn" onClick={() => this.hideModal(true)}>
                <span className="t-d-l">Y</span>es
              </div>
              <div className="btn" onClick={() => this.hideModal(false)}>
                <span className="t-d-l">N</span>o
              </div>
            </div>
          ) : (
            <div className="btn-list">
              <div className="btn" onClick={() => this.hideModal(true)}>
                <span className="t-d-l">O</span>k
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}