"use client";
import { useTranslations } from "next-intl";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import { FormItem, FormWrapper } from "@/components/ui/form";
import { useEffect, useState } from "react";
import AppButton from "@/components/ui/button";
import { useAppDispatch } from "@/lib/redux/hooks";
import { doForgotPassword } from "@/lib/redux/features/auth";
import AppInput from "@/components/ui/input";

import { ForgotPasswordResponse } from "@/types/auth";
import { ResponseStatus } from "@/types/common";

export type ForgotPasswordFormProps = {
  setIsSuccess?: (data: boolean) => void;
};

export default function ForgotPasswordForm({
  setIsSuccess,
}: ForgotPasswordFormProps) {
  const dispatch = useAppDispatch();
  const t = useTranslations("ForgotPasswordPage");

  const [isLoading, setIsLoading] = useState(false);

  const formSchema = z.object({
    email: z
      .string()
      .trim()
      .min(1, { message: t("validate.required") })
      .email({
        message: t("validate.email_invalid"),
      }),
  });

  type ForgotPasswordFormSchema = z.infer<typeof formSchema>;

  const forgotPasswordForm = useForm<ForgotPasswordFormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
    },
  });

  async function onSubmit(values: ForgotPasswordFormSchema) {
    try {
      setIsLoading(true);
      const request = {
        email: values.email,
      };
      console.log("0: ", request);

      const response = await dispatch(doForgotPassword(request));
      const payload = response.payload as ForgotPasswordResponse;
      if (payload && payload.status === ResponseStatus.SUCCESS) {
        setIsSuccess && setIsSuccess(true);
      }
    } catch (error) {
      console.error("Login error:", error);
    } finally {
      setIsLoading(false);
    }
  }

  useEffect(() => {
    // Handle keydown enter to submit form
    const keyDownHandler = (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        forgotPasswordForm.handleSubmit(onSubmit)();
      }
    };

    document.addEventListener("keydown", keyDownHandler);

    return () => {
      document.removeEventListener("keydown", keyDownHandler);
    };
  }, [forgotPasswordForm]);

  return (
    <FormWrapper<ForgotPasswordFormSchema>
      form={forgotPasswordForm}
      onSubmit={onSubmit}
      layout="vertical"
      className="space-y-4"
    >
      <FormItem name="email" label={t("email")}>
        {({ value, ref, ...field }) => (
          <AppInput ref={ref} {...field} placeholder={t("enter_email")} />
        )}
      </FormItem>

      <AppButton
        type="primary"
        htmlType="submit"
        loading={isLoading}
        className="w-full"
      >
        {t("title")}
      </AppButton>
    </FormWrapper>
  );
}