import Box from "@/components/Box";
import { Link, useRouter } from "@/i18n";
import { useSocialStore } from "@/stores/useSocials";
import { useSystemStore } from "@/stores/useSystemStore";
import { Input } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, useRef } from "react";
import { useSwiper } from "swiper/react";
interface Props {}

const cardData = [
    { url: "", icon: "https://9f.com/images/homePage/card/c-cashwheel.png", desc: "" },
    { url: "", icon: "https://9f.com/images/homePage/card/c-affiliate.png", desc: "" },
    { url: "", icon: "https://9f.com/images/homePage/card/c-firstdeposit.png", desc: "" },
    { url: "", icon: "https://9f.com/images/homePage/card/c-firstdeposit.png", desc: "" },
];
const tabs = [
    { name: "casino", id: 1 },
    { name: "esportes", id: 2 },
];
const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
    const t = useTranslations("Sidebar");
    const socials = useSocialStore((state) => state.socials);

    const setCollapse = useSystemStore((state) => state.setCollapse);
    const swiper = useSwiper();
    const router = useRouter();
    const tab = useRef<HTMLDivElement>(null);
    const bgRef = useRef<HTMLDivElement>(null);
    const tabHandler = (index: number) => {
        bgRef.current?.setAttribute(
            "style",
            `transform: translateX(${tab.current?.clientWidth! * index}px)`
        );
        if (index === 1) {
            router.push("/sports");
        } else {
            router.push("/");
        }
        // 关闭侧边栏按钮
        setCollapse(false);
        // 关闭swiper
        swiper.slideNext();
        return index;
    };
    return (
        <Box>
            {/*tabs*/}
            <div className={"relative"}>
                <div className={"relative flex rounded bg-[#333]"}>
                    {tabs.map((item, index) => {
                        return (
                            <div
                                key={index}
                                onClick={() => tabHandler(index)}
                                className={"z-20 flex-1 cursor-pointer text-center"}
                                ref={tab}
                            >
                                {t(item.name)}
                            </div>
                        );
                    })}
                </div>
                <div
                    ref={bgRef}
                    style={{ transform: "translateX(0)" }}
                    className={`absolute left-0 top-0 z-10 h-[100%] w-[50%] rounded bg-primary-color transition-transform duration-300`}
                ></div>
                <div
                    className={`absolute -top-[3px] right-[10px] z-20 w-[0.14rem] text-primary-color`}
                >
                    <img
                        src="data:image/png;base64, "
                        alt=""
                    />
                </div>
            </div>
            {/*  card*/}
            <div className={"mt-[0.11rem] grid grid-cols-2 grid-rows-2 gap-[0.0833rem]"}>
                {cardData.map((item, index) => {
                    return (
                        <div className="bg-white shadow-md" key={index}>
                            <img src={item.icon} alt="" className={"rounded-[0.04rem]"} />
                        </div>
                    );
                })}
            </div>

            {/*  gift */}
            <section className={"my-[0.11rem] flex items-center text-[0.15rem] text-[#fff]"}>
                <span
                    className={"iconfont icon-liwulipinjiangpin mr-[0.0694rem] text-[0.16rem]"}
                ></span>
                <span> {t("promocoes")} </span>
            </section>
            {/*  Esportes */}
            <section
                className={"flex items-center rounded-[3px] bg-[#3a3a3a] p-[0.08rem] text-[#fff]"}
            >
                <i className={"iconfont icon-tiyu mr-[0.0694rem] text-[0.15rem]"}></i>
                <div className={"flex-1"}>{t("esportes")}</div>
                <i className={"iconfont icon-xiangyou1 text-[0.15rem]"}></i>
            </section>
            {/*  code */}
            <section className={"mt-[0.11rem] text-[#fff]"}>{t("promoCode")}</section>
            <section className={"w-1/1 mt-[0.11rem] flex"}>
                <div className={"flex-1 bg-[#3a3a3a] p-[0.0694rem]" + " text-[#fff]"}>
                    <Input
                        placeholder={t("codeInputPlaceHolder")}
                        clearable
                        className={"text-[#fff]"}
                    />
                </div>
                <button
                    className={`w-[0.6rem] bg-gradient-to-b from-[#a28362] to-[#986847] text-[0.12rem] text-[#fff]`}
                >
                    {t("promoButton")}
                </button>
            </section>

            <section className={"mt-[0.11rem] text-[#fff]"}>{t("coumnidade")}</section>

            <section className={"mt-[0.11rem] text-[#fff]"}>
                {/* todo components ?*/}
                <div className={`grid grid-cols-${socials.length >= 5 ? 5 : socials.length}`}>
                    {socials.map((service, index) => {
                        return (
                            <Link
                                key={index}
                                href={service.url}
                                target={"_blank"}
                                className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded"
                            >
                                <img
                                    className={"h-[0.3889rem] w-[0.3889rem]"}
                                    src={service.icon_url}
                                ></img>
                            </Link>
                        );
                    })}
                </div>
            </section>

            <section className={"mt-[0.11rem] text-[#7d7d7d]"}>
                <div className={"flex items-center p-[0.08rem]"}>
                    <i className={"iconfont icon-bangzhu mr-[0.0694rem] text-[0.15rem]"}></i>
                    <div className={"flex-1"}> {t("ajude")}</div>
                </div>
                <div className={"flex items-center p-[0.08rem]"}>
                    <i className={"iconfont icon-duanxinguanli mr-[0.0694rem] text-[0.15rem]"}></i>
                    <div className={"flex-1"}> {t("email")}</div>
                </div>
                <div className={"flex items-center p-[0.08rem]"}>
                    <i className={"iconfont icon-fenxiang mr-[0.0694rem] text-[0.15rem]"}></i>
                    <div className={"flex-1"}> {t("inicial")} </div>
                </div>
            </section>
            <section className={"flex justify-between p-[0.08rem] text-[12px] text-[#7d7d7d]"}>
                <span>Version</span>
                <span>0.0.2</span>
            </section>
        </Box>
    );
};

export default Sidebar;
