/**
 * 银元之战引导提示组件
 * 包含三个引导提示：前往解决按钮、走势图、走势图大图
 */
import { StudyGuideModal } from "@/components";
import { ExhibitOverlay } from "@/components";

export interface YinyuanGuidesProps {
  /** 是否显示引导提示1（前往解决按钮） */
  showGuide1: boolean;
  /** 是否显示引导提示2（走势图） */
  showGuide2: boolean;
  /** 是否显示引导提示3（走势图大图） */
  showGuide3: boolean;
  /** 是否显示走势图大图 */
  showTrendChartDetail: boolean;
  /** 引导提示1关闭回调 */
  onGuide1Close: () => void;
  /** 引导提示2关闭回调 */
  onGuide2Close: () => void;
  /** 引导提示3关闭回调 */
  onGuide3Close: () => void;
  /** 走势图大图关闭回调 */
  onTrendChartDetailClose: () => void;
  /** 走势图点击回调 */
  onTrendChartClick: () => void;
}

/**
 * 银元之战引导提示组件
 * 显示三个引导提示和走势图大图
 */
export const YinyuanGuides = ({
  showGuide1,
  showGuide2,
  showGuide3,
  showTrendChartDetail,
  onGuide1Close,
  onGuide2Close,
  onGuide3Close,
  onTrendChartDetailClose,
  onTrendChartClick,
}: YinyuanGuidesProps) => {
  return (
    <>
      {/* 引导提示1：前往解决按钮出现后 */}
      <StudyGuideModal
        visible={showGuide1}
        onContinue={onGuide1Close}
        verticalAlign="center"
        zIndex={130}
      >
        请跟随指示点击前往解决按钮
      </StudyGuideModal>

      {/* 引导提示2：走势图出现后 */}
      <StudyGuideModal
        visible={showGuide2}
        onContinue={onGuide2Close}
        verticalAlign="center"
        zIndex={130}
      >
        请点击走势图
      </StudyGuideModal>

      {/* 引导提示3：走势图大图打开后 */}
      <StudyGuideModal
        visible={showGuide3}
        onContinue={onGuide3Close}
        verticalAlign="center"
        zIndex={10000}
      >
        请点击银元价格走势图
      </StudyGuideModal>

      {/* 走势图大图展示 - 使用 ExhibitOverlay */}
      <ExhibitOverlay
        visible={showTrendChartDetail}
        src="chenyun/reflection/银元价格走势图"
        description={`以上海为中心，代表"人民币信用"的绿色区域迅速覆盖全市，并向外辐射。`}
        disableDrag={true}
        onClick={onTrendChartClick}
        onClose={onTrendChartDetailClose}
      />
    </>
  );
};