import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
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';

export default class extends Page {
  initState() {
    return { showCalculator: false };
  }

  renderView() {
    return this.renderDetail();
  }

  initData() {
    setTimeout(() => {
      ReactDOM.render(
        <AnswerSelect list={[{ title: '123' }, { title: '321' }]} />,
        document.getElementById('#select#'),
      );
      ReactDOM.render(
        <AnswerTable
          list={[{ title: '123' }, { title: '321' }]}
          columns={[{ key: 'one', title: 'one' }, { key: 'two', title: 'two' }]}
          data={[{ one: '123', two: '321' }]}
        />,
        document.getElementById('#table#'),
      );
    }, 1);
  }

  renderCotent() {
    return (
      <div className="block block-content">
        <Navigation list={['Sports Association', 'News Orgnization', 'News Orgnization']} onChange={() => {}} />
        <div className="text">
          For each of the following statements, select Both accept if, based on the information provided, it can be
          inferred that both the sports association and the news organizations would likely accept that the statement is
          true. If not, select Otherwise.
          <span id="#table#" />
          For each of the following statements, select Both accept if, based on the information provided, it can be
          inferred <span id="#select#" />
          that both the sports association and the news organizations would likely accept that the statement is true. If
          not, select Otherwise.
        </div>
      </div>
    );
  }

  renderAnswer() {
    return (
      <div className="block block-answer">
        <div className="text m-b-2">
          For each of the following statements, select Both accept if, based on the information provided, it can be
          inferred that both the sports association and the news organizations would likely accept that the statement is
          true. If not, select Otherwise.{' '}
        </div>
        <Answer
          list={[
            'Neuroscientists, having amassed a wealth of knowledge',
            'the past twenty years about the brain and its development from birth to adulthood',
            'Neuroscientists, having amassed a wealth of knowledge',
            'the past twenty years about the brain and its development from birth to adulthood, ) the past twenty years about the brain and its development from birth to adulthood',
          ]}
        />
      </div>
    );
  }

  renderDetail() {
    const { showCalculator } = this.state;
    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">OG18：1-20</div>
          <div className="right">
            <div className="block">
              <Assets name="timeleft_icon" />
              Time left 00:02
            </div>
            <div className="block">
              <Assets name="subjectnumber_icon" />1 of 20
            </div>
          </div>
        </div>
        <div className="layout-body two">
          {this.renderCotent()}
          {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">
            Next
            <Assets name="next_icon" />
          </div>
        </div>
      </div>
    );
  }

  renderStart() {
    return (
      <div className="start">
        <div className="bg" />
        <div className="fixed-content">
          <div className="title">「练习」OG18 综合：第1-20题</div>
          <div className="desc">
            <div className="block">
              <div className="desc-title">
                <Assets name="subject_icon" />
                题目总数
              </div>
              <div className="desc-info">20</div>
            </div>
            <div className="block">
              <div className="desc-title">
                <Assets name="time_icon" />
                建议用时
              </div>
              <div className="desc-info">20 min</div>
            </div>
          </div>
          <div className="tip">题目选项乱序显示</div>
          <div className="submit">
            <Button size="lager" radius>
              开始练习
            </Button>
          </div>
        </div>
      </div>
    );
  }
}