"use client";
import { ModalEnum } from "@/components/Box/types";
import { useRouter } from "@/i18n/routing";
import { Mask } from "antd-mobile";
import clsx from "clsx";
import React from "react";
import dialogManage from "../manager";
import styles from "./index.module.scss";

const ImgDialog = () => {
    const keyName = "TextDialog"; // 确保这个keyName是唯一的，与其他地方的keyName不同，以避免冲突
    const [data, setData] = React.useState<any>({});
    const [visible, setVisible] = React.useState<boolean>(false); // 初始值为false，不显示对话框

    const router = useRouter();

    const handler = {
        key: keyName,
        show(data: any, idx: number) {
            if (!data) return "close";
            setData(data);
            setVisible(true);
        },
        hide() {
            setVisible(false);
        },
    };
    React.useEffect(() => {
        dialogManage.registerDialog(handler);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const close = () => {
        dialogManage.hideDialog(keyName);
    };
    //点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
    const doFun = async () => {
        switch (data.action_type) {
            case 2:
                window.open(data.action_params, "_blank");
                break;
            case 3:
                let path = data.action_params;
                if (data.activity_id) {
                    path = `${data.action_params}?activity_id=${data.activity_id}`;
                }
                router.push(path);
                break;
            case 4:
                if (data.action_params === ModalEnum.red_packet) {
                    dialogManage.showDialog("RedPacket");
                }
                if (data.action_params === ModalEnum.pwa_install) {
                    dialogManage.showDialog("PwaInstall");
                }
                break;
            case 5:
                data?.action_params ? await eval(data?.action_params || "") : "";
                break;
            default:
                break;
        }
    };

    return (
        <>
            <Mask visible={visible} onMaskClick={close}>
                <div className={styles.imgDialog}>
                    <div className={styles.imgDialogContainer}>
                        <div
                            dangerouslySetInnerHTML={{ __html: data?.content?.text }}
                            className={clsx(styles.textBox, "ql-editor")}
                            onClick={doFun}
                        ></div>
                        <div className={clsx(styles.close)} onClick={close}>
                            <i
                                className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}
                            ></i>
                        </div>
                    </div>
                </div>
            </Mask>
        </>
    );
};

export default ImgDialog;