site_8g/src/dialog/language/index.tsx

"use client";
import action from "@/components/Header/action";
import { useRouter } from "@/i18n/routing";
import { commonMask } from "@/utils";
import { CenterPopup } from "antd-mobile";
import clsx from "clsx";
import Cookies from "js-cookie";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import { useEffect, useState } from "react";
import dialogManage from "../manager";

const languages = [
    {
        icon: "/svg/br.svg",
        title: "(+55)",
        desc: "Br",
        value: "br",
    },
    // {
    //     icon: "/svg/ES.svg",
    //     title: "(+34)",
    //     desc: "Es",
    //     value: "es",
    // },
    {
        icon: "/svg/UK.svg",
        title: "(+1)",
        desc: "En",
        value: "en",
    },
];

const LanguageSelect = () => {
    const keyName = "LanguageSelect";
    const [visible, setVisible] = useState(false);
    const t = useTranslations("Header");
    const local = useLocale();
    const target = languages.find((item) => item.value === local)!;
    const router = useRouter();

    const languageHandler = async (language: (typeof languages)[number]) => {
        if (local !== language.value) {
            commonMask.show();
        }
        Cookies.set("language", language.value);
        await action();
        router.replace("/", { locale: language.value });
    };
    const current = clsx(
        "h-[0.39rem flex bg-[#2e2d2d] my-[0.11rem] rounded-[0.04rem] p-[0.11rem] text-[#fff] border-1 "
    );
    const dialogHandle = {
        key: keyName,
        show: () => {
            setVisible(true);
        },
    };

    useEffect(() => {
        dialogManage.registerDialog(dialogHandle);
    }, []);

    return (
        <CenterPopup
            visible={visible}
            onMaskClick={() => {
                setVisible(false);
            }}
            onClose={() => {
                setVisible(false);
            }}
            showCloseButton={true}
            getContainer={null}
            bodyStyle={{ background: "#1c1c1c" }}
        >
            <div className={"w-[3rem] rounded-[0.0694rem] bg-[#1f2830] p-[0.1389rem]"}>
                <header className={"text-[#fcde26]"}>{t("locale")}</header>
                {languages.map((item, index) => {
                    return (
                        <div
                            key={index}
                            className={`${current} ${
                                item.value === target.value
                                    ? "border-primary-color"
                                    : "border-[#2e2d2d]"
                            }`}
                            onClick={() => languageHandler(item)}
                        >
                            <Image
                                className={"mr-[0.07rem]"}
                                src={item.icon}
                                alt={item.value}
                                width={30}
                                height={20}
                            />
                            <div className={"mr-[0.04rem]"}>{item.title}</div>
                            <div>{item.desc}</div>
                        </div>
                    );
                })}
            </div>
        </CenterPopup>
    );
};

export default LanguageSelect;