import { m } from '@/paraglide/messages';
import { Locale, setLocale } from '@/paraglide/runtime';
import { settingQueries } from '@/service/queries';
import { updateUserSettings } from '@/service/setting.api';
import { UserSettingInput, userSettingSchema } from '@/service/setting.schema';
import { ReturnError } from '@/types/common';
import { GearIcon } from '@phosphor-icons/react';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useEffect } from 'react';
import { toast } from 'sonner';
import { Button } from '../ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select';
import { Skeleton } from '../ui/skeleton';

const defaultValues: UserSettingInput = {
  language: '',
};

const UserSettingsForm = () => {
  const queryClient = useQueryClient();

  const { data, isLoading } = useQuery(settingQueries.listUser());

  const updateMutation = useMutation({
    mutationFn: updateUserSettings,
    onSuccess: (_, variables) => {
      setLocale(variables.data.language as Locale);
      queryClient.invalidateQueries({
        queryKey: [...settingQueries.all, 'listUser'],
      });
      toast.success(m.settings_messages_update_success(), {
        richColors: true,
      });
    },
    onError: (error: ReturnError) => {
      console.error(error);
      toast.error(
        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
        { richColors: true },
      );
    },
  });

  const form = useForm({
    defaultValues,
    validators: {
      onSubmit: userSettingSchema,
      onChange: userSettingSchema,
    },
    onSubmit: ({ value }) => {
      updateMutation.mutate({ data: value as UserSettingInput });
    },
  });

  useEffect(() => {
    if (data?.value?.language) {
      setTimeout(() => {
        form.setFieldValue('language', data.value.language);
      }, 0);
    }
  }, [data, form]);

  return (
    <Card className="@container/card col-span-1 @xl/main:col-span-2">
      <CardHeader>
        <CardTitle className="text-xl flex items-center gap-2">
          <GearIcon size={20} />
          {m.settings_ui_title()}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form
          id="user-settings-form"
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            form.handleSubmit();
          }}
        >
          <FieldGroup>
            {isLoading ? (
              <div className="col-span-2 space-y-2">
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-10 w-full" />
              </div>
            ) : (
              <form.Field
                name="language"
                children={(field) => {
                  const isInvalid =
                    field.state.meta.isTouched && !field.state.meta.isValid;
                  return (
                    <Field data-invalid={isInvalid} className="col-span-2">
                      <FieldLabel htmlFor={field.name}>
                        {m.settings_form_language()}
                      </FieldLabel>
                      <Select
                        name={field.name}
                        value={field.state.value}
                        onValueChange={(value) => field.handleChange(value)}
                      >
                        <SelectTrigger aria-invalid={isInvalid}>
                          <SelectValue placeholder="Select Language" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="en">English</SelectItem>
                          <SelectItem value="vi">Vietnamese</SelectItem>
                        </SelectContent>
                      </Select>
                      {isInvalid && (
                        <FieldError errors={field.state.meta.errors} />
                      )}
                    </Field>
                  );
                }}
              />
            )}
            <Field>
              <Button type="submit" disabled={isLoading}>
                {m.ui_update_btn()}
              </Button>
            </Field>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
  );
};

export default UserSettingsForm;