import React from 'react';
import { Link } from 'react-router-dom';
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';
import OtherAnswer from '../../../components/OtherAnswer';

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>
      </div>
    );
  }

  renderBody() {
    const { question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    const { hideAnalysis } = this.state;
    const show = typeset === 'one' ? true : !hideAnalysis;
    return (
      <div className="layout-content">
        <div className={`${typeset}`}>
          {this.renderContent()}
          {this.renderAnswer()}
        </div>
        {this.renderAnalysis()}
        {typeset === 'two' && (
          <div className="fixed-analysis" onClick={() => this.setState({ hideAnalysis: !hideAnalysis })}>
            {show ? '查看解析>' : '收起解析>'}
          </div>
        )}
      </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 ${typeset}-analysis ${!show ? 'hide' : ''}`}>
        <Tabs
          type="division"
          active="1"
          tabs={[
            { key: '1', name: '官方解析', path: '/' },
            { key: '2', name: '千行解析', path: '/' },
            { key: '3', name: '题源联想', path: '/' },
            { key: '4', name: '相关回答', path: '/' },
          ]}
        />
        {this.renderText()}
      </div>
    );
  }

  renderText() {
    return (
      <div className="detail">
        <div className="detail-block answer-block" />
        <div className="detail-block text-block">
          “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>
    );
  }

  renderOtherAnswer() {
    const { otherAnswer = [1, 2, 3, 4, 5] } = this.state;
    return (
      <div className="other">
        {otherAnswer.map(() => {
          return <OtherAnswer />;
        })}
      </div>
    );
  }

  renderAnswer() {
    const { question = { content: {} } } = this.state;
    const { typeset = 'one' } = question.content;
    return <div className="block block-answer">{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>
    );
  }

  renderAsk() {
    return (
      <div className="modal ask">
        <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>
    );
  }

  renderAskOk() {
    return (
      <div className="modal ask-ok">
        <div className="mask" />
        <div className="body">
          <div className="title">提问</div>
          <div className="content">
            <div className="left">
              <div className="text">已提交成功！</div>
              <div className="text">感谢您的耐心反馈，我们会尽快核实并以站内信的方式告知结果。</div>
              <div className="text">您也可以关注公众号及时获取结果。</div>
            </div>
            <div className="right">
              <div className="text">扫码关注公众号</div>
              <div className="text">千行GMAT</div>
            </div>
          </div>
          <div className="confirm">
            <AnswerButton size="lager" theme="confirm">
              好的，知道了
            </AnswerButton>
          </div>
        </div>
      </div>
    );
  }

  renderAskFail() {
    return (
      <div className="modal ask-ok">
        <div className="mask" />
        <div className="body">
          <div className="title">提问</div>
          <div className="content">
            <div className="left">
              <div className="text">提问功能正在维护中。</div>
              <div className="text">可先查阅“相关问答” 或 成为学员享受极速 答疑特权。</div>
              <Link to="/">了解更多></Link>
            </div>
            <div className="right">
              <div className="text">扫码关注公众号</div>
              <div className="text">千行GMAT</div>
            </div>
          </div>
          <div className="confirm">
            <AnswerButton size="lager" theme="confirm">
              好的，知道了
            </AnswerButton>
          </div>
        </div>
      </div>
    );
  }

  renderError() {
    return (
      <div className="modal error">
        <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>
    );
  }

  renderErrorOk() {
    return (
      <div className="modal error-ok">
        <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>
    );
  }

  renderNote() {
    const { note = ['题目', '官方解析'] } = this.state;
    return (
      <div className="modal note">
        <div className="mask" />
        <div className="body">
          <div className="title">笔记</div>
          <div className="content">
            <div className="tabs">
              {note.map(item => {
                return (
                  <div className="tab">
                    <div className="text">{item}</div>
                    <div className="date">2019.05.13 15:30</div>
                  </div>
                );
              })}
            </div>
            <div className="input">
              <textarea className="textarea" placeholder="记下笔记，方便以后复习" />
              <div className="bottom">
                <AnswerButton theme="cancel" size="lager">
                  取消
                </AnswerButton>
                <AnswerButton size="lager">编辑</AnswerButton>
                <AnswerButton size="lager">保存</AnswerButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}