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

import Overview from './components/Overview';
import Questions from './components/Questions';
import Report from './components/Report';

import type { IBaseProps } from './types'

interface IProps extends IBaseProps {
    // platform: number; // 平台：PC：1  H5: 2
    // env: string; // 编译环境
  activedTab: number; // 当前选中tab
    // reportId: string; // 报告id
    // snapStepId: string; // 步骤id
    // snapPlanId: string; // 专项id
  testRounds: number; // 重练轮次
  meansModalCallback: (meanName:string, data: any) => void; // 意思列表弹窗数据回调
  stepReport: number; // 是否有阶段报告 无：1  有：2
  studyStatus: number; // 是否开启练兵(答题)模块 学习积累学习状态(0:未开始 2:已完成)
  tabsActivedCallback: (status: number) => void; // 选中模块回调
  onRetrain: (rounds: number) => void; // 阶段报告 重练一次 点击回调
}


const ClassicalChinese: React.FC<IProps> = ({
  platform = 1,
  env = 'prod',
  activedTab = 1,
  reportId,
  snapStepId,
  snapPlanId,
  testRounds = 1,
  meansModalCallback,
  stepReport = 1,
  studyStatus,
  tabsActivedCallback,
  onRetrain,
}) => {
  const [isReport, setIsReport] = useState(stepReport); // 是否阶段报告状态

  const setReportState = (status: number) => {
    setIsReport(status);
  }

  useEffect(() => {
    // 防止在阶段报告页面刷新页面，导致页面无法停留在阶段报告页
    const stepInfo = `${reportId}_${snapStepId}_${testRounds}`;
    const paperStatusStore = window.sessionStorage.getItem(`classical_status_${stepInfo}`);
    if (paperStatusStore) {
      setIsReport(2);
      return
    }

    setIsReport(stepReport);
  }, [testRounds, isReport])

  return (
    <>
      <section className="ewt-holiday-classical-chinese-container">
        {/* 学习积累 */}
        <div className={`overview-questions-content ${activedTab === 1 ? 'actived-content' : ''}`}>
          <Overview
            env={env}
            platform={platform}
            reportId={reportId}
            snapStepId={snapStepId}
            snapPlanId={snapPlanId}
            studyStatus={studyStatus}
            meansModalData={meansModalCallback}
            tabsBack={tabsActivedCallback}
          />
        </div>

        {/* 题目 & 答案解析 */}
        <div className={`overview-questions-content ${activedTab === 2 ? 'actived-content' : ''}`}>
          {isReport === 1 && (
            <Questions
              env={env}
              platform={platform}
              reportId={reportId}
              snapStepId={snapStepId}
              snapPlanId={snapPlanId}
              testRounds={testRounds}
              onFinish={setReportState}
            />
          )}

          {/* 阶段报告 */}
          {isReport === 2 && (
            <Report
              env={env}
              platform={platform}
              reportId={reportId}
              snapStepId={snapStepId}
              snapPlanId={snapPlanId}
              testRounds={testRounds}
              onRetrain={onRetrain}
            />
          )}
        </div>

      </section>
    </>
  );
};

export default ClassicalChinese;