import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useLocale } from "@/hooks/use-localed";
import { useUrl } from "@/hooks/use-url";
import { client } from "@/lib/api-client";
import {
  getLocaleOrigin,
  type Locale,
  locales,
  transformPathLocale,
} from "@/lib/locale";
import { updateLanguage } from "@/lib/server-actions/update-language";
import { GlobeIcon, ChevronDownIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useTransition } from "react";

export default function SiteHeaderLanguage({
  className,
  basePath,
}: {
  className?: string;
  basePath: string;
}) {
  const locale = useLocale();
  const router = useRouter();
  const url = useUrl();
  const [transitioning, startTransition] = useTransition();

  const localeText = {
    en: "EN",
    zh: "中文",
    ja: "日本語",
    ko: "한국어",
  };

  const handleChangeLocale = (locale: Locale) => (event: Event) => {
    event.preventDefault();
    if (locales.includes(locale)) {
      startTransition(() => {
        void updateLanguage(locale).then(() => {
          client.refetchQueries({ queryKey: ["user.me"] }).catch(() => {});
          client
            .refetchQueries({ queryKey: ["lab.meta"], exact: false })
            .catch(() => {});
          startTransition(() => {
            router.push(transformPathLocale(url, locale));
            router.refresh();
          });
        });
      });
    } else {
      const newUrl = new URL(
        getLocaleOrigin(locale) + basePath + transformPathLocale(url, locale)
      );
      location.href = newUrl.toString();
    }
  };

  if (locales.length <= 1) {
    return <span className={className} />;
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button className={className} variant="ghost">
          <GlobeIcon />
          <span className="text-sm">
            {localeText[locale as keyof typeof localeText] ?? locale}
          </span>
          <ChevronDownIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuRadioGroup value={locale}>
          {locales.includes("en") && (
            <DropdownMenuRadioItem
              value="en"
              onSelect={handleChangeLocale("en")}
              disabled={transitioning}
            >
              English
            </DropdownMenuRadioItem>
          )}
          {locales.includes("zh") && (
            <DropdownMenuRadioItem
              value="zh"
              onSelect={handleChangeLocale("zh")}
              disabled={transitioning}
            >
              中文
            </DropdownMenuRadioItem>
          )}
          {locales.includes("ja") && (
            <DropdownMenuRadioItem
              value="ja"
              onSelect={handleChangeLocale("ja")}
              disabled={transitioning}
            >
              日本語
            </DropdownMenuRadioItem>
          )}
          {locales.includes("ko") && (
            <DropdownMenuRadioItem
              value="ko"
              onSelect={handleChangeLocale("ko")}
              disabled={transitioning}
            >
              한국어
            </DropdownMenuRadioItem>
          )}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}