import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import { A2QuestionResType, A2QuestionType } from "@/types";
import { A2_APIgoodsSaveAnswer } from "@/store/action/A2Main";
import classNames from "classnames";
import { Button } from "antd";

const objC = {
  0: "A",
  1: "B",
  2: "C",
  3: "D",
  4: "E",
};

type Props = {
  closeFu: () => void;
  questionList: A2QuestionType[];
};

function Tab4S3({ closeFu, questionList }: Props) {
  const [listRes, setListRes] = useState<A2QuestionResType[]>([]);

  useEffect(() => {
    const arr = [] as A2QuestionResType[];
    questionList.forEach((v) => {
      const temp = JSON.parse(v.answer);
      arr.push({
        id: v.id,
        txt: v.description,
        goodsId: v.goodsId,
        title: v.question,
        ok: temp.correct,
        answer: temp.answer,
        done: false,
        mySelect: "",
      });
    });
    setListRes(arr);
  }, [questionList]);

  // 选择答案
  const selecttFu = useCallback(
    async (item: A2QuestionResType, val: string) => {
      if (!item.done) {
        const arr = listRes.map((v) => {
          return {
            ...v,
            done: v.id === item.id ? true : v.done,
            mySelect: v.id === item.id ? val : v.mySelect,
          };
        });
        setListRes(arr);
        // 发送请求
        await A2_APIgoodsSaveAnswer(item.id, val === item.ok ? 1 : 0);
      }
    },
    [listRes]
  );

  return (
    <div className={styles.Tab4S3}>
      <div className="tab4S3main">
        {/* 关闭按钮 */}
        <div className="tab4S3close" onClick={closeFu}>
          <CloseOutlined />
        </div>
        <div className="tab4S3Top">问答</div>

        {/* 主要内容 */}
        {questionList.length ? (
          <div className="tab4S3cen">
            <div className="tab4S3cenTit">单选题</div>
            <div className="left3Main myscroll">
              {listRes.map((v1, i1) => (
                <div className="left3MainRow" key={v1.id}>
                  <div className="left3MainRowT">
                    {i1 + 1}、{v1.title}
                  </div>
                  {v1.answer.map((v2, i2) => (
                    <div
                      key={v2.val}
                      className={classNames(
                        "left3MainRowC",
                        v1.done ? "left3MainRowCN" : "",
                        v1.ok === v2.val && v1.done ? "left3MainRowCD" : "",
                        v1.mySelect === v2.val && v1.done
                          ? "left3MainRowCX"
                          : ""
                      )}
                      onClick={() => selecttFu(v1, v2.val)}
                    >
                      {Reflect.get(objC, i2)}：{v2.name}
                    </div>
                  ))}
                  {/* 回答情况 */}
                  <div className="left3Sta" hidden={!v1.done}>
                    {v1.ok === v1.mySelect ? (
                      <div className="left3Sta1">
                        恭喜你，回答正确&emsp;
                        <CheckOutlined />
                      </div>
                    ) : (
                      <div className="left3Sta2">
                        很遗憾，回答错误&emsp;
                        <CloseOutlined />
                      </div>
                    )}
                  </div>
                  {/* 说明 */}
                  <div className="left3Txt" hidden={!v1.done || !v1.txt}>
                    {/* 正确答案：{v1.ok}
              <br /> */}
                    题目解析：{v1.txt}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="tab4S3cenNone">暂无题目</div>
        )}

        {/* 退出按钮 */}
        <div className="tab4S3xBtn" onClick={closeFu}>
          <Button>关闭</Button>
        </div>
      </div>
    </div>
  );
}

const MemoTab4S3 = React.memo(Tab4S3);

export default MemoTab4S3;
