import React, { useEffect } from 'react';
import classnames from 'classnames';

interface IProps {
  className?: string;
  prefixCls?: string;
  dataSource: any;
  platform?: number; // 平台：PC：1  H5: 2
  snapPlanId: string;
  snapStepId: string;
}

/* const data =  {
  "snapStepId": "190",
  "title": "多受任革活党1多受任革活党1",
  "classPercent": null,
  "gradePercent": null,
  "count": 3,
  "rightCount": 0,
  "testCount": 3,
  "canNext": false,
  "canWrongTest": true,
  "wrongTestRounds": 2,
  "finishPercent": 1.0,
  "masterPercent": 0.0
} */

const Report: React.FC<IProps> = (props) => {
  const {
    className,
    prefixCls = 'ewt-homework-words-report',
    platform = 1,
    dataSource,
    children,
    snapPlanId,
    snapStepId,
  } = props;

  useEffect(() => {
    if (snapPlanId && snapStepId) {
      const paperStatusStore = `words_paper_status_${snapPlanId}_${snapStepId}`;
      if (paperStatusStore) {
        window.sessionStorage.removeItem(`words_paper_status_${snapPlanId}_${snapStepId}`)
      }
    }
  }, [snapPlanId, snapStepId])

  const { title, canNext, masterPercent, rightCount, count, classPercent, gradePercent, testCount } = dataSource;

  return (
    <section
      className={classnames(
        { [`${prefixCls}`]: true },
        { [`${className}`]: !!className },
        `words-report-${platform}`
      )}
    >
      <div className="avatar">
        {
          Number(masterPercent) >= 70
            ? (<img src="//file.ewt360.com/file/1061115419014218304" className="avatar-pic" alt="" title={title} />)
            : (<img src="//file.ewt360.com/file/1075731081053462739" className="avatar-pic" alt="" title={title} />)
        }
      </div>

      <div className="report-text">
        <h3 className="period-title">本阶段训练完成</h3>
        {Number(masterPercent) >= 70 ? (
          <p className="period-tips">恭喜你击败了本班 <span>{classPercent}%</span> 的同学<br />本年级 <span>{gradePercent}%</span>的同学</p>
        ) : (
          <p className="period-tips">很遗憾，你本阶段的训练不是很理想 无法挑战下一关，再巩固一下吧</p>
        )}
      </div>

      <div className="period-result-nums">
        <div className="result-item">
          <p>
            <span>{testCount}</span>
            个
          </p>
          <p>训练单词量</p>
        </div>
        <div className="result-item">
          <p>
            <span>{rightCount}</span>
            个
          </p>
          <p>回答正确单词数</p>
        </div>
        <div className="result-item">
          <p className="active">
            <span>{masterPercent}</span>
            %
          </p>
          <p>单词掌握度</p>
        </div>
      </div>

      {children}
    </section>
  );
}

export default Report;