"use client";
import forgetPasswordPhoneRequest from "@/app/api-requests/forgetPasswordPhoneRequest";
import Input from "@/components/ui/Input";
import MainButton from "@/components/ui/MainButton";
import { Form } from "@/components/ui/form";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { toast } from "@/components/ui/use-toast";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { ForgetPassFormState } from "@/modules/authentication/authFormState";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

type Props = {
  setForgetState: React.Dispatch<React.SetStateAction<ForgetPassFormState>>;
  setPhone: React.Dispatch<React.SetStateAction<string>>;
};

const ForgetPassForm = ({ setForgetState, setPhone }: Props) => {
  const { locale } = useCurrentLanguage();
  const formSchema = z.object({
    phone: z
      .string()
      .min(9, { message: locale?.["invalid_mobile_number"] })
      .max(14, { message: locale?.["invalid_mobile_number"] })
      .refine(
        (val) => {
          return !isNaN(Number(val));
        },
        { message: locale?.["invalid_mobile_number"] }
      ),
  });

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      phone: "",
    },
  });
  const { data, mutate, isLoading } = forgetPasswordPhoneRequest();
  function onSubmit({ phone }: z.infer<typeof formSchema>) {
    setPhone(phone);
    mutate({ phone });
  }
  useEffect(() => {
    if (data) {
      if (!data?.errors) {
        setForgetState("pinCodeMessage");
        toast({
          title: "success",
          description: "pin code has sent to you",
          className: "bg-green-700 text-white rounded-xl",
        });
      }
    }
  }, [data]);

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="space-y-4 capitalize mt-8"
      >
        <Input
          form={form}
          placeholder="phone"
          name="phone"
          label="phone"
          type="number"
        />
        <MainButton
          disabled={isLoading}
          intent={isLoading ? "loading" : "primary"}
          type="submit"
          size="sm"
          fullWidth
          className="!mt-10"
        >
          <TranslateClient text="submit" />
        </MainButton>
      </form>
    </Form>
  );
};

export default ForgetPassForm;