import React, { Component } from 'react';
import './index.less';
import { Link } from 'react-router-dom';
import { Checkbox } from 'antd';
import Module from '../Module';
import Progress from '../Progress';
import IconButton from '../IconButton';
import Button from '../Button';

export default class Card extends Component {
  getBuyBody() {
    const { data } = this.props;
    return (
      <div className="body">
        <div className="desc" dangerouslySetInnerHTML={{ __html: data.description }} />
        <div className="btn">
          <Button size="lager" radius>
            立即购买
          </Button>
        </div>
      </div>
    );
  }

  getOpenBody() {
    return (
      <div className="body">
        <div className="title">请开通预习作业</div>
        <div className="text">
          <Checkbox />
          <span>
            我已阅读并同意<Link to="">《千行 GMAT - Sentence Corretion 课程协议》</Link>
          </span>
        </div>
        <div className="btn">
          <Button size="lager" radius>
            立即开通
          </Button>
        </div>
      </div>
    );
  }

  getIngBody() {
    const { process, previewAction } = this.props;
    return (
      <div className="body">
        <div className="title">近期待完成</div>
        {process.previews.length === 0 ? (
          <div className="text">
            <div>好棒！</div>
            <div>近期的作业都完成啦</div>
          </div>
        ) : (
          <div className="list">
            {process.previews.map(item => {
              return (
                <div className="item">
                  <div className="top">
                    <div className="date">{item.time}</div>
                    <div className="action">
                      {!item.repport.id && (
                        <IconButton
                          type="start"
                          tip="Start"
                          onClick={() => previewAction && previewAction('start', item)}
                        />
                      )}
                      {item.repport.id && (
                        <IconButton
                          type="continue"
                          onClick={() => previewAction && previewAction('continue', item)}
                          tip="Continue"
                        />
                      )}
                      {item.repport.id && (
                        <IconButton
                          type="restart"
                          onClick={() => previewAction && previewAction('restart', item)}
                          tip="Restart"
                        />
                      )}
                    </div>
                  </div>
                  <Progress progress={item.report.id ? item.repport.userNumber / item.report.questionNumber : 0} />
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  }

  getBody() {
    const { process = {} } = this.props;
    if (!process.payed && !process.startTime) return this.getBuyBody();
    if (process.payed) return this.getOpenBody();
    if (process.startTime) return this.getIngBody();
    return <div />;
  }

  render() {
    const { style, data = {}, process = {} } = this.props;

    return (
      <Module
        style={style}
        className={`card ${!process.payed && !process.startTime ? 'buy' : ''} ${process.payed ? 'open' : ''}  ${
          process.startTime ? 'ing' : ''
        }`}
      >
        <div className="header">
          {`${data.titleZh} ${data.titleEn}`}
          {!process.payed && !process.startTime && <span className="sub-title">未购买</span>}
          {(process.payed || process.startTime) && <span className="sub-title">已购买</span>}
        </div>
        {this.getBody()}
      </Module>
    );
  }
}