'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useLocale, useTranslations } from 'next-intl';
import { useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';

import { Form, FormField } from '@/components/ui/common/Form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/common/Select';
import { CardContainer } from '@/components/ui/elements/CardContainer';
import { setCurrentLanguage } from '@/libs/i18n/language';
import {
  changeLanguageSchema,
} from '@/schemas/user/change-language.schema';

import type { TypeChangeLanguageSchema } from '@/schemas/user/change-language.schema';

const languages = {
  ru: 'Русский',
  en: 'English',
};

export const ChangeLanguageForm = () => {
  const t = useTranslations('dashboard.settings.appearance.language');

  const [isPending, startTransition] = useTransition();
  const locale = useLocale();

  const form = useForm<TypeChangeLanguageSchema>({
    resolver: zodResolver(changeLanguageSchema),
    values: {
      language: locale,
    },
  });

  function onSubmit(data: TypeChangeLanguageSchema) {
    startTransition(async () => {
      try {
        await setCurrentLanguage(data.language);
      } catch (error) {
        toast.success(t('successMessage'));
      }
    });
  }

  return (
    <CardContainer
      description={t('description')}
      heading={t('heading')}
      rightContent={(
        <Form {...form}>
          <FormField
            control={form.control}
            name="language"
            render={({ field }) => (
              <Select
                value={field.value}
                onValueChange={(value: string) => {
                  field.onChange(value);
                  void form.handleSubmit(onSubmit)();
                }}
              >
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder={t('selectPlaceholder')} />
                </SelectTrigger>

                <SelectContent>
                  {Object.entries(languages).map(
                    ([code, name]) => (
                      <SelectItem
                        key={code}
                        disabled={isPending}
                        value={code}
                      >
                        {name}
                      </SelectItem>
                    ),
                  )}
                </SelectContent>
              </Select>
            )}
          />
        </Form>
      )}
    />
  );
};