"use client";
import { GroupType } from "@/api/home";
import Box from "@/components/Box";
import { useRouter } from "@/i18n";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import { FC, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import HomeGames from "./HomeGames";

const buttonGroup = [
    {
        icon: "pro-liwulipinjiangpin",
        category_name: "first",
        isHot: true,
        url: "/promo",
        locale: true,
        lock: false,
    },
    {
        icon: "pro-youxi1",
        category_name: "second",
        isHot: false,
        url: "/gameList/110",
        locale: true,
        lock: true,
    },
    {
        icon: "pro-huodongyule",
        category_name: "third",
        isHot: false,
        url: "/gameList/110",
        locale: true,
        lock: true,
    },
    {
        icon: "pro-shipin",
        category_name: "fourth",
        isHot: false,
        url: "/gameList/112",
        locale: true,
        lock: true,
    },
    {
        icon: "pro-yingyong",
        category_name: "Fifth",
        isHot: false,
        url: "/gameList/110",
        locale: true,
        lock: true,
    },
];

type TabItemType = (typeof buttonGroup)[number] & GroupType;
const TabItem = ({
    item,
    active,
    onClick,
}: {
    item: TabItemType;
    active?: boolean;
    onClick?: (item: TabItemType) => void;
}) => {
    const t = useTranslations("ButtonGroup");
    const router = useRouter();
    const handler = (item: TabItemType) => {
        if (!item.locale) {
            onClick && onClick(item);
            return;
        }

        if (item.lock) {
            Toast.show("It is under development.");
        } else {
            router.push("/promo");
        }
    };
    const cls = clsx("pro-iconfont  text-[0.14rem]", `pro-${item.icon}`);

    const rootCls = clsx(
        "relative mr-[0.06rem] flex h-[0.3rem] bg-[#3a3a3a] flex-1 cursor-pointer items-center" +
            " rounded-[0.05rem]  px-[0.08rem] py-[0.03rem] text-[0.12rem] text-[#fff]",
        { "bg-primary-color": active }
    );
    return (
        <div className={rootCls} onClick={() => handler(item)}>
            <span className={cls}></span>
            <span className={"ml-[0.03rem] truncate"}>
                {item.locale ? t(item.category_name) : item.category_name}
            </span>
            {item.isHot && (
                <img
                    className={"absolute -top-[0.12rem] right-0 h-[0.21rem] w-[0.21rem]"}
                    src="data:image/png;base64,[encoded data, 4424 characters]"
                    alt=""
                />
            )}
        </div>
    );
};

interface Props {
    tabs: GroupType[];
}
const Tabs: FC<Props> = (props) => {
    const { tabs } = props;
    const tabData = [...tabs, ...buttonGroup];
    const [active, setActive] = useState<number>(0);
    const selectHandler = (item: TabItemType, index: number) => {
        setActive(index);
    };

    if (!tabs.length) return null;
    const groupGames = tabs[active].category;
    return (
        <>
            <Box pt={false}>
                <Swiper slidesPerView={3.5} centeredSlidesBounds>
                    {tabData?.map((group, index) => (
                        <SwiperSlide key={index} className={"pt-[0.1389rem]"}>
                            <TabItem
                                item={group as TabItemType}
                                active={index === active}
                                onClick={(event) => selectHandler(event, index)}
                            ></TabItem>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </Box>

            <HomeGames groupGames={groupGames} />
        </>
    );
};

export default Tabs;
