"use client"
import * as React from "react"
import { useParams } from 'next/navigation';
import { useTransition } from 'react';
import { usePathname, useRouter } from '@/i18n/navigationd';
import { Locale } from '@/i18n/routing';
import { useLocale } from "next-intl";
import { Button } from "./Button";
import { CustomCard } from "../cards";
import { LanguagesIcon } from "lucide-react";

export default function LanguagesMenu() {
    const [openMenu, setOpenMenu] = React.useState<boolean>(false)
    const menuRef = React.useRef<HTMLDivElement>(null);

    const router = useRouter();
    const [isPending, startTransition] = useTransition();
    const pathname = usePathname();
    const params = useParams();

    function onSelectChange(e: string) {
        const nextLocale = e as Locale;
        startTransition(() => {
            router.replace(
                // @ts-expect-error -- TypeScript will validate that only known `params`
                // are used in combination with a given `pathname`. Since the two will
                // always match for the current route, we can skip runtime checks.
                { pathname, params },
                { locale: nextLocale }
            );
        });
    }
    const locale = useLocale();

    React.useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                setOpenMenu(false);
            }
        };

        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    return (
        <div className="relative" ref={menuRef}
        >
            <Button url="" className={`capitalize !font-normal bg-transparent text-foreground hover:text-primary w-10 h-10 p-0 hover:bg-transparent hover:scale-110  transition-all ${openMenu && " scale-110 text-primary"} `} onClick={() => setOpenMenu(true)}><LanguagesIcon /></Button>
            {openMenu &&
                <CustomCard className="absolute w-11  top-10 z-10 flex flex-col  animate-slidedown border-none shadow-lg">
                    <Button disabled={isPending} className={`p-0 m-0 h-7 bg-transparent  hover:bg-transparent ${locale === "en" ? "text-primary" : "text-muted-foreground"} cursor-pointer hover:brightness-150 duration-300`} onClick={() => onSelectChange("en")}>EN</Button>
                    <Button disabled={isPending} className={`p-0 m-0 h-7 bg-transparent  hover:bg-transparent ${locale === "fr" ? "text-primary" : "text-muted-foreground"} cursor-pointer hover:brightness-150 duration-300`} onClick={() => onSelectChange("fr")}>FR</Button>
                </CustomCard>
            }
        </div>
    )
}