"use client";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { useLocale, useTranslations } from "next-intl";
import { Form } from "@/shared/ui/form";
import AppButton from "@/shared/buttons/AppButton";
import { useRouter } from "nextjs-toploader/app";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { UseMutate } from "@/hooks/UseMutate";
import { useDispatch } from "react-redux";
import { addForgetPassword } from "@/store/forget.slice";
import LocalePath from "@/shared/LocalePath";
import FormPhoneNumber from "@/shared/form-controls/FormPhoneNumber";

export default function VerifyEmail() {
  const t = useTranslations("");
  const locale = useLocale();

  const formSchema = yup.object({
    phone_limit: yup.number(),
    phone: yup
      .string()
      .required(t("validations.requiredField", { field: t("LABELS.phone") }))
      .test((value, context) => {
        let phoneLimit = context.parent.phone_limit;

        if (!phoneLimit) return true;
        if (value && value.length !== parseInt(phoneLimit)) {
          return context.createError({
            message: t("validations.phoneLimit", {
              length: `${phoneLimit}`,
            }),
            path: "phone",
          });
        }
        return true;
      }),
    phone_code: yup.string(),
  });

  const form = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: {
      phone: "",
      phone_limit: 9,
      phone_code: "",
    },
  });

  const router = useRouter();
  const dispatch = useDispatch();
  const { mutate, isLoading } = UseMutate({
    endpoint: "client/auth/forgot-password",
    onSuccess: (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title: responseData?.message,
      });
      dispatch(
        addForgetPassword({
          verification_token: responseData?.data?.verification_token,
        }),
      );
      router.replace(
        `${locale == "ar" ? "" : "/en"}/auth/forget-password/verify-code-email`,
      );
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    await mutate({ phone: values?.phone, phone_code: values?.phone_code });

    dispatch(
      addForgetPassword({
        phone: values?.phone,
        phone_code: values?.phone_code,
      }),
    );
  }
  return (
    <div className="flex flex-col gap-3  lg:w-[450px] md:[550px]  w-[300px] h-fit py-2">
      <div className="mb-3">
        <h3 className="text-text-primary lg:text-2xl text-lg font-medium mb-3 text-center">
          {t("Text.forgetPasswordTitle")}
        </h3>
        <p className="text-secondarytext text-[14px] text-center">
          {t("Text.verifyIdentityDesc")}
        </p>
      </div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex flex-col gap-4">
            <FormPhoneNumber name="phone" label="phone" />
          </div>

          <div className="!pt-2">
            <AppButton
              title={t("BUTTONS.next")}
              buttonType="submit"
              loader={isLoading}
              disabled={isLoading}
              button
              className=" !w-full !h-[56px] !rounded-xl  !mt-[20px]"
            />
          </div>
        </form>
      </Form>
      <p className="flex justify-center items-center mt-4 text-sm text-text-secondary ">
        <LocalePath
          href="/auth/login"
          className="font-medium hover:underline text-text-secondary cursor-pointer ms-1 text-sm"
        >
          {t("BUTTONS.back_to_login")}
        </LocalePath>
      </p>
    </div>
  );
}