import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Icon from '../../../components/Icon';
import Button from '../../../components/Button';
import Tabs from '../../../components/Tabs';
import Progress from '../../../components/Progress';
import HardInput from '../../../components/HardInput';
import AnswerCheckbox from '../../../components/AnswerCheckbox';

export default class extends Page {
  constructor(props) {
    super(props);
    this.state = { hideAnalysis: true };
  }

  renderView() {
    return (
      <div className="layout">
        <div className="layout-header">
          <div className="left">
            <div className="title">长难句练习 · Part2</div>
          </div>
          <div className="right">
            <div className="text">Time cost 00:02</div>
            <Icon name="star" />
          </div>
        </div>
        {this.renderBody()}
        <div className="layout-footer">
          <div className="left">
            <Icon name="sceen-full" />
          </div>
          <div className="center">
            <div className="p">
              <Progress theme="theme" progress={20} />
            </div>
            <div className="t">5/20</div>
          </div>
          <div className="right">
            <Button size="lager" radius>
              Next <Assets name="next_icon" />
            </Button>
          </div>
        </div>
      </div>
    );
  }

  renderBody() {
    return (
      <div className="layout-body">
        <div className="title">请分别找出句子中的主语，谓语和，并做出逻辑关系判断。</div>
        <div className="desc">
          of so—called cybersquatters, people who register the Internet domain names of high—profile companies in hopes
          of reselling the rights to those names for a profit,
        </div>
        <div className="label">主语</div>
        <div className="input">
          <HardInput
            selected
            answer={0}
            show
            list={[{ text: 123 }, { text: 321 }]}
            otherList={[{ text: 123 }, { text: 321 }]}
          />
        </div>
        <div className="label">谓语</div>
        <div className="input">
          <HardInput />
        </div>
        <div className="label">宾语</div>
        <div className="input">
          <HardInput />
        </div>
        <div className="select">
          <div className="select-title">本句存在以下哪种逻辑关系？（可多选）</div>
          <AnswerCheckbox show list={[{ text: 123 }, { text: 321 }]} selected={1} answer={0} />
        </div>
        <div className="analysis">
          <Tabs
            type="division"
            active="1"
            tabs={[{ key: '1', name: '解析详情', path: '/' }, { key: '2', name: '中文语意', path: '/' }]}
          />
          <div className="result" />
        </div>
      </div>
    );
  }
}