import React from 'react';
import Assets from '@src/components/Assets';
import { formatDate } from '@src/services/Tools';
import './index.less';
import Button from '../Button';

function Continue(props) {
  const { data = {}, onContinue, onRestart, onNext, onClose } = props;
  const { updateTime, paper = {}, userNumber, questionNumber } = data;
  return (
    <div className="continue">
      <div className="body">
        <div className="left">
          <div className="text">上次做题</div>
          <div className="date">{updateTime && formatDate(updateTime, 'YYYY-MM-DD HH:mm:ss')}</div>
        </div>
        <div className="center">
          <div className="text">{paper.title} {questionNumber > 0 ? userNumber * 100 / questionNumber : 0}%</div>
          <div className="list">
            {userNumber < questionNumber && <Button radius theme="border" size="small" onClick={() => {
              onContinue();
            }}>
              <Assets name="ico_24_continue" svg />
              Continue
            </Button>}
            {userNumber === questionNumber && <Button radius theme="border" size="small" onClick={() => {
              onRestart();
            }}>
              <Assets name="ico_24_restart" svg />
              Restart
            </Button>}
            {userNumber < questionNumber && <Button radius theme="border" size="small" onClick={() => {
              onNext();
            }}>
              <Assets name="ico_24_next" svg />
              Next
            </Button>}
          </div>
        </div>
        <div className="right">
          <Assets name="close" svg onClick={() => {
            onClose();
          }} />
        </div>
      </div>
    </div>
  );
}
Continue.propTypes = {};
export default Continue;