import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Tabs from '../../../components/Tabs';
import Icon from '../../../components/Icon';
import Switch from '../../../components/Switch';
import AnswerList from '../../../components/AnswerList';
import AnswerButton from '../../../components/AnswerButton';

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="no">No.36</div>
            <div className="title">OG18 - Easy (21-40) </div>
          </div>
          <div className="center">
            ID:PREP 07-124
            <Icon name="more" />
          </div>
          <div className="right">
            <span className="b">
              用时:<span className="s">1</span>m<span className="s">39</span>s
            </span>
            <span className="b">
              全站:<span className="s">1</span>m<span className="s">39</span>s
            </span>
            <span className="b">
              <span className="s">80</span>%
            </span>
            <Icon name="question" />
            <Icon name="star" />
          </div>
        </div>
        <div className="layout-body">{this.renderBody()}</div>
        <div className="layout-footer">
          <div className="left">
            <Icon name="sceen-full" />
          </div>
          <div className="center">
            <AnswerButton className="item">笔记</AnswerButton>
            <AnswerButton className="item">提问</AnswerButton>
            <AnswerButton className="item">纠错</AnswerButton>
          </div>
          <div className="right">
            <Icon name="prev" />
            <Icon name="next" />
          </div>
        </div>
        {this.renderModal()}
      </div>
    );
  }

  renderBody() {
    const { question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    return (
      <div className="layout-content">
        <div className={`${typeset}`}>
          {this.renderContent()}
          {this.renderAnswer()}
        </div>
        {this.renderAnalysis()}
      </div>
    );
  }

  renderAnalysis() {
    const { question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    const { hideAnalysis } = this.state;
    const show = typeset === 'one' ? true : !hideAnalysis;
    return (
      <div className={`block block-analysis ${!show ? 'hide' : ''}`}>
        <Tabs
          type="card"
          active="1"
          tabs={[
            { key: '1', name: '官方解析', path: '/' },
            { key: '2', name: '千行解析', path: '/' },
            { key: '3', name: '题源联想', path: '/' },
            { key: '4', name: '相关回答', path: '/' },
          ]}
        />
        <div className="detail">
          “Offering support services to spouses caring for their other halves may reduce martial stress and prevent
          divorce at older ages,” she said. “But it’s also important to recognize that the pressure to divorce may be
          health-related and that sick ex-wives may need additional care and services to prevent worsening health and
          increased health costs.”
        </div>
      </div>
    );
  }

  renderAnswer() {
    const { question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    const { hideAnalysis } = this.state;
    const show = typeset === 'one' ? true : hideAnalysis;
    return (
      <div className={`block block-answer ${!show ? 'hide' : ''}`}>
        {typeset === 'two' ? <Switch>显示答案</Switch> : ''}
      </div>
    );
  }

  renderContent() {
    const { question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    return (
      <div className="block block-content">
        {typeset === 'one' ? <Switch>显示答案</Switch> : ''}
        <AnswerList
          selected={1}
          answer={2}
          show
          list={[
            { text: ' They can become increasingly vulnerable to serious illness.' },
            { text: ' They can become increasingly vulnerable to serious illness.' },
            { text: ' They can become increasingly vulnerable to serious illness.' },
            { text: ' They can become increasingly vulnerable to serious illness.' },
          ]}
        />
      </div>
    );
  }

  renderModal() {
    return (
      <div className="modal">
        <div className="mask" />
        <div className="body">
          <div className="title">提问</div>
          <div className="desc">
            <div className="select">我想对进行提问</div>
            <div className="label">有疑问的具体内容是：</div>
            <textarea className="textarea" placeholder="请复制粘贴有疑问的内容。" />
            <div className="label">针对以上内容的问题是：</div>
            <textarea className="textarea" placeholder="提问频率高的问题会被优先回答哦。" />
          </div>
          <div className="bottom">
            <AnswerButton theme="cancel" size="lager">
              取消
            </AnswerButton>
            <AnswerButton size="lager">提交</AnswerButton>
          </div>
        </div>
      </div>
    );
  }
}