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

import Question from './Question';
import Answer from './Answer';
import Report from './Report';
import Progress from './components/Progress';
import Empty from './components/Empty';
import Audio from './components/Audio';
import TimeCountDown from './components/TimeCountDown';

import { getStepUnStartTestWords, getStepUnStartTestWrongWords } from './services';

import './style/index.scss';

interface IProps {
  questionClassName?: string;
  answerClassName?: string;
  platform: number; // 平台：PC：1  H5: 2
  align?: string; // 整体内容显示方式 center: 居中，left：居左
  env?: string; // 编译环境
  reportId: string | number; // 报告id
  snapStepId: string | number; // 步骤id
  snapPlanId: string | number; // 专项id
  showProgress?: boolean; // 是否显示进度条
  onFinish: () => void; // 答题完成回调
  wrongTestRounds: string | number | undefined; // 重练轮次
  loadingNode?: any; // load组件
  showCountDown: boolean; // 答题倒计时开关，默认 开启
  countDownTime?: number; // 倒计时时间，单位 秒
}


const Words: React.FC<IProps> = ({
  questionClassName,
  answerClassName,
  env = 'prod',
  reportId,
  snapStepId,
  snapPlanId,
  platform = 1,
  align = 'center',
  showProgress = true,
  onFinish,
  wrongTestRounds = -1,
  loadingNode = null,
  showCountDown = false,
  countDownTime = 20,
}) => {
  const [showAnswer, setShowAnswer] = useState<boolean>(false);
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [currentQuestion, setCurrentQuestion] = useState<any>({});
  const [wordPaperList, setWordPaperList] = useState<any>([]);
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(true);

  const onSubmit = () => {
    // 标记是否打完最后一题
    if (currentIndex === wordPaperList.length - 1) {
      window.sessionStorage.setItem(`words_paper_status_${snapPlanId}_${snapStepId}`, `${snapPlanId}_${snapStepId}`);
    }
    setShowAnswer(true);
  }

  const onNextQuestion = () => {
    if (currentIndex === wordPaperList.length - 1) {
      onFinish && onFinish();
      return false;
    }
    const index = currentIndex + 1;
    setCurrentIndex(index);
    setCurrentQuestion(wordPaperList[index]);
    setShowAnswer(false);
  }

  useEffect(() => {
    // 防止答题完成，未点击进入阶段报告，直接刷新页面
    const paperStatusStore = window.sessionStorage.getItem(`words_paper_status_${snapPlanId}_${snapStepId}`);
    if (paperStatusStore && paperStatusStore === `${snapPlanId}_${snapStepId}`) {
      onFinish && onFinish();
      return;
    };
    // 获取题目列表
    const getStepUnStartTestWordsList = async () => {
      const { data } = await getStepUnStartTestWords({
        reportId,
        snapStepId,
        snapPlanId,
      }, env);

      if ((data || []).length > 0) {
        const dataSize = data.length;

        setCurrentQuestion(data[0]);
        setTotalCount(data[dataSize - 1].sort);
      }
      setWordPaperList(data || []);
      setLoading(false);
    };
    // 错题重练
    const getStepUnStartTestWrongWordsList = async () => {
      const { data } = await getStepUnStartTestWrongWords({
        reportId,
        snapStepId,
        snapPlanId,
        wrongTestRounds,
      }, env);

      if ((data || []).length > 0) {
        const dataSize = data.length;

        setCurrentQuestion(data[0]);
        setTotalCount(data[dataSize - 1].sort);
      }
      setWordPaperList(data || []);
      setLoading(false);
    };

    if (wrongTestRounds !== -1 && wrongTestRounds !== undefined) { // 错题重练
      getStepUnStartTestWrongWordsList();
    } else {
      getStepUnStartTestWordsList();
    }
  }, [reportId, snapStepId, snapPlanId]);

  if (loadingNode && loading) {
    return loadingNode;
  }

  return (
    <>
      {wordPaperList.length > 0 ? !showAnswer && (
        <section className={`words-question-wrap ${showCountDown ? 'words-with-countdown' : ''}`}>
          {/* 答题倒计时 */}
          {showCountDown && (
            <TimeCountDown
              env={env}
              dataSource={currentQuestion}
              countDownTime={countDownTime}
              onSubmit={onSubmit}
            />
          )}

          {showProgress && (
            <Progress
              platform={platform}
              current={currentQuestion.sort}
              total={totalCount}
              percent={(currentQuestion.sort / totalCount) * 100}
            />
          )}

          <Question
            className={questionClassName}
            env={env}
            align={align}
            platform={platform}
            dataSource={currentQuestion}
            onSubmit={onSubmit}
          />
        </section>
      ) : <Empty description="该阶段没有题目！" className="empty-data" />}

      {/* 题目答案 */}
      {showAnswer && currentQuestion?.detailId && (
        <Answer
          className={answerClassName}
          env={env}
          platform={platform}
          detailId={currentQuestion.detailId}
          reportId={reportId}
          snapStepId={snapStepId}
          isLast={currentIndex === wordPaperList.length - 1}
          onNext={onNextQuestion}
          loadingNode={loadingNode}
        />
      )}
    </>
  );
};

Words.Report = Report;
Words.Audio = Audio;
export default Words;