"use client";
import { ServiceTypes } from "@/api/customservice";
import { Link } from "@/i18n";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import { useSocialStore } from "@/stores/useSocials";
import { Badge } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, useEffect } from "react";

interface Props {
    services: ServiceTypes[];
    socials: ServiceTypes[];
}
const ServiceWidget: FC<Props> = (props) => {
    const { services, socials } = props;
    const defaultService = services.find((item) => item.is_suspend === 1);

    const newServices = services.filter((item) => item.is_suspend !== 1);
    const setSocials = useSocialStore((state) => state.setSocials);
    useEffect(() => {
        // 数据存储，侧边栏使用
        setSocials(socials);
    }, []);
    const t = useTranslations("HomePage");

    const { unread } = useGlobalNoticeStore((state) => ({
        unread: state.unread,
    }));
    return (
        <>
            {defaultService && (
                <Link
                    href={defaultService.url}
                    className={
                        "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
                        " absolut absolute bottom-[0.84rem] right-[0.12rem] z-50 bg-gradient-to-b from-[#ff6a01] to-primary-color"
                    }
                    target={"_blank"}
                >
                    <img
                        className={"h-[0.3889rem] w-[0.3889rem]"}
                        src={defaultService.icon_url}
                    ></img>
                </Link>
            )}

            <Link
                href={"/notification"}
                className={
                    "flex h-[0.54rem] w-[0.54rem] items-center" +
                    " absolute bottom-[1.44rem] right-[0.12rem] z-50 justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
                }
            >
                <Badge content={!!unread ? unread : null} style={{ "--top": "12px" }}>
                    <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
                </Badge>
            </Link>

            <div className={`grid grid-cols-${newServices.length >= 5 ? 5 : newServices.length}`}>
                {newServices.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>

            <div className={"text-[#ff6a01]"}>{t("Service")}</div>

            {/*share*/}
            <div className={"my-[0.2rem] text-[0.08rem] text-[#adadad]"}>{t("Share")}</div>

            <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>
        </>
    );
};

export default ServiceWidget;
