import { customErrorMapWrapper } from "~/hooks/locale";
import { z } from "zod";
import { useZodForm } from "~/lib/zodForm";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "~/components/custom_ui/form";
import Input from "~/components/custom_ui/input";
import { useTranslation } from "~/providers/I18nProvider";
import { api } from "~/utils/api";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { useState } from "react";

export const FormPswReset = () => {
  const router = useRouter();
  const LoginSchema = z.object({
    email: z.string().email("Inserisci una email valida"),
  });

  type LoginFormValues = z.infer<typeof LoginSchema>;

  const defaultValues: LoginFormValues = {
    email: "",
  };
  const { locale, t } = useTranslation();
  z.setErrorMap(customErrorMapWrapper(locale));

  const form = useZodForm({
    schema: LoginSchema,
    defaultValues: defaultValues,
  });

  const { mutate } = api.auth.sendResetLink.useMutation({
    onMutate: () => {
      setAlreadyRequested(true);
    },
    onSuccess: async () => {
      toast.success(
        "Verifica la tua casella di posta per il link di reset password",
      );
      await router.push("/login");
    },
    onError: () => {
      toast.error(t.auth.login.fail);
    },
  });
  const [altreadyRequested, setAlreadyRequested] = useState(false);
  function onSubmit(fields: LoginFormValues) {
    mutate({
      email: fields.email,
    });
    form.reset();
  }

  return (
    <>
      <div className="text-center">
        <div className="my-8 space-y-5">
          <h3 className="text-3xl font-bold text-gray-800 sm:text-3xl">
            {t.pwReset.titolo}
          </h3>
        </div>

        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-8 px-0.5"
          >
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <div className="flex flex-wrap items-center gap-x-2">
                    <FormLabel htmlFor="email">{t.pwReset.email}</FormLabel>{" "}
                    <FormMessage />
                  </div>

                  <FormControl>
                    <Input
                      placeholder="esempio@email.com"
                      {...field}
                      id="email"
                    />
                  </FormControl>
                </FormItem>
              )}
            />

            <Button
              disabled={altreadyRequested}
              type="submit"
              className="w-full rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white duration-150 hover:bg-indigo-500 active:bg-indigo-600"
            >
              {t.pwReset.get_link}
            </Button>
          </form>
        </Form>
      </div>
    </>
  );
};