/**
 * 银元之战题目组件
 * 包含多选题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}
      />
    </>
  )
}