import { useAppForm } from '@hooks/use-app-form';
import { m } from '@paraglide/messages';
import { KeyIcon } from '@phosphor-icons/react';
import { changePassword } from '@service/profile.api';
import { ChangePassword, changePasswordFormSchema } from '@service/user.schema';
import { useMutation } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle } from '@ui/card';
import { Field, FieldGroup } from '@ui/field';
import { toast } from 'sonner';

const defaultValues: ChangePassword = {
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
};

const ChangePasswordForm = () => {
  const { mutate: changePasswordMutation, isPending } = useMutation({
    mutationFn: changePassword,
    onSuccess: () => {
      form.reset();
      toast.success(m.change_password_messages_change_password_success(), {
        richColors: true,
      });
    },
    onError: (error: ReturnError) => {
      console.error(error);
      const code = error.code as Parameters<
        typeof m.backend_message
      >[0]['code'];
      toast.error(m.backend_message({ code }), {
        richColors: true,
      });
    },
  });

  const form = useAppForm({
    defaultValues,
    validators: {
      onSubmit: changePasswordFormSchema,
      onChange: changePasswordFormSchema,
    },
    onSubmit: async ({ value }) => {
      changePasswordMutation({ data: value });
    },
  });

  return (
    <Card className="@container/card">
      <CardHeader>
        <CardTitle className="text-xl flex items-center gap-2">
          <KeyIcon size={20} />
          {m.change_password_ui_title()}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form
          id="change-password-form"
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            form.handleSubmit();
          }}
        >
          <FieldGroup>
            <form.AppField name="currentPassword">
              {(field) => (
                <field.TextField
                  label={m.change_password_form_current_password()}
                  type="password"
                />
              )}
            </form.AppField>
            <form.AppField name="newPassword">
              {(field) => (
                <field.TextField
                  label={m.change_password_form_new_password()}
                  type="password"
                />
              )}
            </form.AppField>
            <form.AppField name="confirmPassword">
              {(field) => (
                <field.TextField
                  label={m.change_password_form_confirm_password()}
                  type="password"
                />
              )}
            </form.AppField>
            <Field>
              <form.AppForm>
                <form.SubscribeButton
                  label={m.ui_change_password_btn()}
                  disabled={isPending}
                />
              </form.AppForm>
            </Field>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
  );
};

export default ChangePasswordForm;
