"use client";
import { getGlobalNoticeApi, getGlobalUserNoticeApi } from "@/api/home";
import { Link, usePathname, useRouter } from "@/i18n/routing";
import { getToken } from "@/utils/Cookies";
import { Badge } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { ChangeEvent, FC, ReactNode, useEffect } from "react";
import "./style.scss";

import { getUserDepositApi, getUserMoneyApi } from "@/api/user";
import { useEventPoint } from "@/hooks/useEventPoint";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { useWalletStore } from "@/stores/useWalletStore";
import { useRequest } from "ahooks";

/**
 * @description 底部Tab组件
 * @param children 插槽内容
 *
 */
export interface FooterProps {
    children?: ReactNode;
}

const whitRouter = ["/deposit", "/profile"];
const tabList = [
    {
        iconSpanName: "icon-zhuye",
        label: "start",
        path: "/",
    },
    {
        iconSpanName: "icon-qianbao3",
        label: "deposit",
        path: "/deposit",
    },
    {
        iconSpanName: "icon-afiliado",
        label: "affiliated",
        path: "/affiliate/summary",
    },
    {
        iconSpanName: "icon-lihe",
        label: "promocoes",
        path: "/promo",
    },
    {
        iconSpanName: "icon-yonghu",
        label: "profile",
        path: "/profile",
    },
];
const Footer: FC = () => {
    const token = getToken();
    const t = useTranslations("navBar");
    const { eventPurchase, eventFirstDeposit } = useEventPoint();

    const pathname = usePathname();

    const router = useRouter();

    const goPage = (event: ChangeEvent<any>, path = "/") => {
        event.preventDefault();
        if (!token && (path == "/deposit" || path == "/profile" || path == "/sports")) {
            router.push(`/login?redirect=${path}`);
            return;
        }
        router.push(path);
    };

    const { unread, userUnred, setNotices, setUserUnread, promotion_count, setPromotionCount } =
        useGlobalNoticeStore((state) => ({
            unread: state.unread,
            setNotices: state.setNotices,
            setUserUnread: state.setUserUnread,
            setPromotionCount: state.setPromotionCount,
            userUnred: state.userUnred,
            promotion_count: state.promotion_count,
        }));

    const setWallet = useWalletStore((state) => state.setWallet);
    const { run } = useRequest(getGlobalNoticeApi, {
        pollingInterval: 10000,
        manual: true,
        pollingErrorRetryCount: 3,
        pollingWhenHidden: false,
        onSuccess: (data) => {
            setNotices(data?.data || [], data?.summery.unread || 0);
            setPromotionCount(data.summery.promotion_count || 0);
        },
    });

    const { run: userRun } = useRequest(getGlobalUserNoticeApi, {
        pollingInterval: 10000,
        manual: true,
        pollingErrorRetryCount: 3,
        pollingWhenHidden: false,
        onSuccess: (data) => {
            setUserUnread(data.summery.unread || 0);
        },
    });

    const { run: walletRun } = useRequest(getUserMoneyApi, {
        pollingInterval: 5000,
        pollingWhenHidden: true,
        pollingErrorRetryCount: 3,
        staleTime: 5000,
        manual: true,
        refreshDeps: [token],
        onError: (error) => {},
        onSuccess: (res) => {
            setWallet(res.data);
        },
    });
    const { run: depositRun } = useRequest(getUserDepositApi, {
        pollingInterval: 10000,
        pollingWhenHidden: true,
        pollingErrorRetryCount: 3,
        staleTime: 5000,
        manual: true,
        refreshDeps: [token],
        onError: (error) => {},
        onSuccess: (res) => {
            if (Object.keys(res.data).length < 0) return;

            if (res.data.is_first_pay === 1) {
                eventFirstDeposit();
                return;
            }
            if (res.data.is_success === 1) {
                eventPurchase();
            }
        },
    });

    useEffect(() => {
        if (getToken()) {
            run();
            walletRun();
            userRun();
            depositRun();
        }
    }, []);

    return (
        <footer className={"footer-placeholder"}>
            <div className="footer-box">
                <div className={"footer-item"}>
                    {tabList.map((item, index) => {
                        return (
                            <Link
                                href={item.path}
                                onClick={(event) => goPage(event, item.path)}
                                key={index}
                                prefetch
                                className={`footer-item-column ${item.path === pathname ? "active" : ""}`}
                            >
                                <div className="icon-box">
                                    {index == 2 ? (
                                        <div className="relative top-[-.08rem] flex h-[.64rem] w-[.64rem] items-center justify-center overflow-hidden rounded-[50%]">
                                            {/* <Image src="/home/game.png" width={84} height={84} alt='middle'></Image> */}
                                            <img
                                                src={"/home/game.png"}
                                                style={{
                                                    width: ".5rem",
                                                    maxWidth: "1000%",
                                                    position: "relative",
                                                }}
                                                alt=""
                                            />
                                        </div>
                                    ) : (
                                        <Badge
                                            content={
                                                (index === 4 && unread) ||
                                                (index === 4 && userUnred)
                                                    ? Badge.dot
                                                    : null
                                            }
                                        >
                                            <span
                                                className={clsx("iconfont", item.iconSpanName)}
                                            ></span>
                                        </Badge>
                                    )}
                                    {index == 3 && !!promotion_count && (
                                        <div className="absolute -top-[0px] right-[18px] flex h-[.16rem] w-[.16rem] items-center justify-center rounded-[50%] bg-[#ff0000] text-[.1rem] text-[#fff]">
                                            {promotion_count > 99 ? `99+` : promotion_count}
                                        </div>
                                    )}
                                </div>
                                <label>{t(item.label)}</label>
                            </Link>
                        );
                    })}
                </div>
            </div>
        </footer>
    );
};

export default Footer;