import { Button } from "@/components/ui/button";
import { useGlobal } from "@/context/global";
import { ServerRequest } from "@/lib/actions";
import { cn } from "@/lib/utils";
import { getCurrentLocale, setCurrentLocale } from "@/services/locales";
import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@radix-ui/react-popover";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function LanguageSettings() {
  const { dict } = useGlobal();

  const [open, setOpen] = useState<boolean>(false);
  const [languages, setLanguages] = useState<
    { locale: string; label: string }[]
  >([]);
  const [locale, setLocale] = useState<string>();

  const pathname = usePathname();
  const router = useRouter();

  const setNewLocale = async (newLocale: string) => {
    const formData = new FormData();

    formData.append("LOCALE", newLocale);

    await setCurrentLocale(formData);
    localStorage.setItem("LOCALE", newLocale);

    router.replace(pathname.replace(locale as string, newLocale));
  };

  useEffect(() => {
    setLanguages([
      { locale: "es", label: dict.pages.languages.spanish },
      { locale: "en", label: dict.pages.languages.english },
    ]);

    return () => {
      setLanguages([]);
    };
  }, []);

  useEffect(() => {
    const getLocale = async () => {
      const savedLocale = localStorage.getItem("LOCALE");

      if (savedLocale) {
        return setLocale(savedLocale);
      }
      const result = await ServerRequest<string>(getCurrentLocale());

      setLocale(result.data);
    };

    getLocale();
  }, [localStorage]);

  return (
    <div className="space-y-2">
      <p className="text-base font-bold">{dict.pages.settings.general.title}</p>
      <hr />
      <div className="flex gap-2">
        <p className="py-2">{dict.pages.settings.language.title}</p>
        <div>
          <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="solid"
                color="primary"
                size="sm"
                decorator={{
                  content: open ? faCaretDown : faCaretRight,
                  pos: "end",
                }}
              >
                {
                  languages.find((language) => language.locale === locale)
                    ?.label
                }
              </Button>
            </PopoverTrigger>
            <PopoverContent
              side="right"
              align="start"
              className="ml-2 w-[150px] rounded border bg-white p-0 shadow"
            >
              {languages.map((e, i) => (
                <p
                  key={i}
                  className={cn(
                    "cursor-pointer border-l-2 p-2 hover:bg-gray-100",
                    {
                      "border-green-800": locale === e.locale,
                      "border-transparent": locale !== e.locale,
                    },
                  )}
                  onClick={() => setNewLocale(e.locale)}
                >
                  {e.label}
                </p>
              ))}
            </PopoverContent>
          </Popover>
        </div>
      </div>
    </div>
  );
}