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

import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { useRequest } from "ahooks";

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

const whitRouter = ["/deposit", "/profile"];
const tabList = [
    {
        iconSpanName: "icon-home",
        label: "start",
        path: "/",
    },
    {
        iconSpanName: "icon-qianbao1",
        label: "deposit",
        path: "/deposit",
    },
    {
        iconSpanName: "icon-afiliado",
        label: "affiliated",
        path: "/affiliate/summary",
    },
    {
        iconSpanName: "icon-tiyu",
        label: "exports",
        path: "/sports",
    },
    {
        iconSpanName: "icon-yonghu",
        label: "profile",
        path: "/profile",
    },
];
const Footer: FC = () => {
    const token = getToken();
    const t = useTranslations("navBar");

    const pathname = usePathname();

    const router = useRouter();

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

    const { unread, setNotices } = useGlobalNoticeStore((state) => ({
        unread: state.unread,
        setNotices: state.setNotices,
    }));

    useRequest(getGlobalNoticeApi, {
        pollingInterval: 5000,
        pollingErrorRetryCount: 3,
        pollingWhenHidden: false,
        onSuccess: (data) => {
            setNotices(data?.data || [], data?.summery.unread || 0);
        },
    });

    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}
                                className={`footer-item-column ${item.path === pathname ? "active" : ""}`}
                            >
                                <div className="icon-box">
                                    {index == 2 ? (
                                        <>
                                            <i className="icon-afiliado"></i>
                                            <i className="icon-rs"></i>
                                        </>
                                    ) : (
                                        <Badge content={index === 4 && unread ? Badge.dot : null}>
                                            <span
                                                className={clsx("iconfont", item.iconSpanName)}
                                            ></span>
                                        </Badge>
                                    )}
                                    {index == 3 && <b className="icon-hot"></b>}
                                </div>
                                <label>{t(item.label)}</label>
                            </Link>
                        );
                    })}
                </div>
            </div>
        </footer>
    );
};

export default Footer;
