"use client";
import action from "@/components/Header/action";
import { useRouter } from "@/i18n";
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 { FC, PropsWithChildren, useState } from "react";
import styles from "./style.module.scss";
interface Props {
    visibleLanguage: boolean;
}

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 HeaderTitle: FC<PropsWithChildren<Props>> = (props) => {
    const { visibleLanguage } = props;
    const t = useTranslations("Header");
    const router = useRouter();
    const local = useLocale();
    const target = languages.find((item) => item.value === local)!;
    const [visible, setVisible] = useState(false);
    const handler = () => {
        setVisible(!visible);
    };

    const languageHandler = async (language: (typeof languages)[number]) => {
        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 "
    );

    return (
        <>
            <span className={styles.headerTitle}>
                <Image
                    width={105}
                    height={40}
                    src="/logo.png"
                    alt="logo"
                    className={"h-full"}
                ></Image>

                {visibleLanguage ? (
                    <div className={styles.selectCountry} onClick={handler}>
                        <Image src={target.icon} alt={target.value} width={30} height={20} />
                        <i className={styles.menuDown}></i>
                    </div>
                ) : null}
            </span>

            <CenterPopup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false);
                }}
                onClose={() => {
                    setVisible(false);
                }}
                showCloseButton={true}
                getContainer={null}
                bodyStyle={{ background: "#1c1c1c" }}
            >
                <div className={"w-[3rem] rounded-[0.0694rem] bg-[#4a4a4a] 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)}
                            >
                                {/*<img*/}
                                {/*    src={item.icon}*/}
                                {/*    alt={item.value}*/}
                                {/*    className={"mr-[0.07rem] w-[0.3rem]"}*/}
                                {/*></img>*/}
                                <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 HeaderTitle;
