"use client";
import { ActionType } from "@/api/home";
import { useRouter } from "@/i18n";
import { isHttpUrl } from "@/utils";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { CSSProperties, FC, PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";
interface Props {
    pt?: boolean;
    pb?: boolean;
    pl?: boolean;
    pr?: boolean;
    none?: boolean;
    className?: string;
    style?: CSSProperties;
    Tag?: "section" | "div";

    // 点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
    action?: ActionType;
    actionData?: unknown;
}

/**
 * @description
 * 1`:接受padding属性， 有默认值， 有自定义值, 默认显示， 可自定并且合并
 * todo 2: 可通过 clo / row 定义flex 布局
 * todo 3: 可设置背景
 */

/**
 * @description 跳转外部链接
 */
const openWindow = (url: string) => {
    if (isHttpUrl(url)) {
        window.open(url);
    } else {
        Toast.show("非法地址");
    }
};
const Box: FC<PropsWithChildren<Props>> = (props) => {
    const router = useRouter();
    const {
        className,
        children,
        pt = true,
        pb = true,
        pl = true,
        pr = true,
        none = false,
        style,
        Tag = "div",
        action = undefined,
        actionData = undefined,
    } = props;

    const cls = clsx(
        !none && {
            ["pt-[0.08rem]"]: pt,
            ["pb-[0.08rem]"]: pb,
            ["px-[0.12rem]"]: pl || pr,
        },
        className
    );

    const handler = () => {
        if (!action) return;
        console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 68`, action);
        switch (action) {
            case 1:
                return;
            case 2:
                openWindow(actionData as string);
                break;
            case 3:
                router.push(actionData as string);
                break;
            case 4:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 59`);
                break;
            case 5:
                break;
            case 6:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 65`);
                break;
            case 7:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 68`);
                break;
            default:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 71`);
                break;
        }
    };
    return (
        <Tag className={twMerge(cls)} style={style} onClick={handler}>
            {children}
        </Tag>
    );
};

export default Box;
