import { createRequest } from '@/data/request/create-request';
import { useSWR } from '@/hooks/useSWR';
import { cn } from '@/lib/utils';
import { SharedData } from '@/types';
import { getLanguageName } from '@/utils/getLanguageName';
import { usePage } from '@inertiajs/react';
import { CaretDownIcon, TranslateIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import LoaderIcon from '../icons/loader-icon';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu';

type LangSwitcherVariant = 'default' | 'admin';

export default function LangSwitcher({
  variant = 'default',
}: {
  variant?: LangSwitcherVariant;
}) {
  const { data, isLoading } = useSWR('/languages');
  const { locale } = usePage<SharedData>().props;
  const { t } = useTranslation();

  const triggerVariants: Record<LangSwitcherVariant, string> = {
    default: 'h-12 bg-white/50 bg-transparent',
    admin: 'h-12 bg-transparent hover:bg-transparent dark:hover:bg-transparent',
  };

  const handleLanguageChange = (lang: string) => {
    toast.promise(
      createRequest({ url: `/languages/${lang}` }).then((res) => {
        if (!res.message) throw new Error(res.message);
        window.location.reload();
        return res;
      }),
      {
        loading: 'Updating language...',
        success: (res) => res.message,
        error: t('Failed to update language'),
      },
    );
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        className={cn(
          'flex cursor-pointer items-center justify-center gap-3 px-4 transition-[background] duration-300 ease-out',
          triggerVariants[variant],
        )}
      >
        {variant === 'default' ? (
          <>
            <span className="font-medium">{getLanguageName(locale)}</span>
            <CaretDownIcon weight="bold" className="size-5" />
          </>
        ) : (
          <>
            <TranslateIcon weight="bold" className="size-5 md:hidden" />
            <span className="hidden font-medium md:inline">
              {getLanguageName(locale)}
            </span>
            <CaretDownIcon weight="bold" className="hidden size-5 md:inline" />
          </>
        )}
      </DropdownMenuTrigger>
      <DropdownMenuContent
        className={
          variant == 'admin'
            ? ''
            : 'min-w-40 space-y-1 rounded-xl border-white/5 bg-white/50 p-2 dark:bg-secondary dark:text-white'
        }
      >
        {isLoading ? (
          <div className="flex min-h-20 items-center justify-center">
            <LoaderIcon />
          </div>
        ) : (
          data?.map((lang: string) => (
            <DropdownMenuItem
              key={lang}
              onClick={() => handleLanguageChange(lang)}
              className={
                variant == 'admin'
                  ? ''
                  : 'font-medium hover:bg-black/10 hover:backdrop-blur-md dark:hover:bg-black/50'
              }
            >
              {getLanguageName(lang)}
            </DropdownMenuItem>
          ))
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}