/**
 * 银元之战题目组件
 * 包含多选题1、多选题2、旁白2
 */
import { Narration, MultipleChoiceQuizPanel } from "@/components";
import SuccessAlert from "@/components/layout/alert/success-alert";
import { getPublicPath } from "@/lib/utils";

export interface YinyuanQuizzesProps {
  /** 是否显示多选题1 */
  showQuiz1: boolean;
  /** 是否显示旁白2 */
  showNarration2: boolean;
  /** 旁白2文本 */
  narration2Text: string;
  /** 是否显示多选题2 */
  showQuiz2: boolean;
  /** 是否显示成功提示框 */
  showSuccessAlert: boolean;
  /** 多选题1提交回调 */
  onQuiz1Submit: (values: string[], isCorrect: boolean) => void;
  /** 旁白2关闭回调 */
  onNarration2Close: () => void;
  /** 多选题2提交回调 */
  onQuiz2Submit: (values: string[], isCorrect: boolean) => void;
  /** 成功提示框继续回调 */
  onSuccessAlertContinue: () => void;
}

/**
 * 银元之战题目组件
 * 显示多选题1、多选题2、旁白2和成功提示框
 */
export const YinyuanQuizzes = ({
  showQuiz1,
  showNarration2,
  narration2Text,
  showQuiz2,
  showSuccessAlert,
  onQuiz1Submit,
  onNarration2Close,
  onQuiz2Submit,
  onSuccessAlertContinue,
}: YinyuanQuizzesProps) => {
  return (
    <>
      {/* 多选题1 - 点击引导图标后显示 */}
      <MultipleChoiceQuizPanel
        visible={showQuiz1}
        title="【多选】面对银元投机狂潮,你认为首要突破口是? "
        options={[
          { value: "A", label: "A. 政治攻势（警告、约谈）" },
          { value: "B", label: "B. 经济手段（抛售银元,以银元打银元）" },
          { value: "C", label: "C. 舆论动员（宣传人民币信用,发动群众）" },
        ]}
        correctAnswer={["A", "B", "C"]}
        errorMessage="单一措施效果有限,请尝试综合施策。"
        minSelections={1}
        maxSelections={3}
        minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
        submitText="提交"
        onSubmit={onQuiz1Submit}
        onError={(error) => {
          console.log("错误信息:", error);
        }}
      />

      {/* 旁白文字2（图2）- 多选题1答对后显示 */}
      <Narration
        text={narration2Text}
        visible={showNarration2}
        onClose={onNarration2Close}
        enableAnimation={false}
        audioSrc={getPublicPath("audio/chenyun/mp3_chenyun_31.mp3")}
      />

      {/* 多选题2（图3）- 关闭旁白后显示 */}
      <MultipleChoiceQuizPanel
        visible={showQuiz2}
        title="【多选】面对投机商的猖狂反扑,下一步应采取哪些决定性措施?"
        options={[
          { value: "A", label: "A. 加大银元抛售量,耗尽投机资本" },
          { value: "B", label: "B. 查封投机核心场所,逮捕首要分子" },
          { value: "C", label: "C. 颁布法令,严禁银元计价流通" },
        ]}
        correctAnswer={["A", "B", "C"]}
        errorMessage="单一措施效果有限,请尝试综合施策。"
        minSelections={1}
        maxSelections={3}
        minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
        submitText="提交"
        onSubmit={onQuiz2Submit}
        onError={(error) => {
          console.log("错误信息:", error);
        }}
      />

      {/* 成功提示框 - 多选题2答对后显示 */}
      <SuccessAlert
        visible={showSuccessAlert}
        title="恭喜你, 选择正确!"
        content="陈云同志的意见是:三管齐下,但核心是查封投机核心场所,逮捕首要分子。擒贼先擒王,打掉指挥部。"
        onContinue={onSuccessAlertContinue}
      />
    </>
  );
};