"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 { ScrollArea } from "@/shared/ui/scroll-area";
import { Form } from "@/shared/ui/form";
import { AuthStage } from "@/interfaces/types";
import AppButton from "@/shared/buttons/AppButton";
import { useDispatch } from "react-redux";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { UseMutate } from "@/hooks/UseMutate";
import { addForgetPassword } from "@/store/forget.slice";
import FormPhoneNumber from "@/shared/form-controls/FormPhoneNumber";

interface ChangeEmailFormProps {
  setAuthStage: (stage: AuthStage) => void;
  dialogOpen: (open: boolean) => void;
}
const ChangeEmailForm: React.FC<ChangeEmailFormProps> = ({
  setAuthStage,
  dialogOpen,
}) => {
  const t = useTranslations("");
  const locale = useLocale();
  const dispatch = useDispatch();
  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 { mutate, isLoading } = UseMutate({
    endpoint: "client/profile/change-phone",
    onSuccess: (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title: responseData?.message,
      });
      dispatch(
        addForgetPassword({
          verification_token: responseData?.data?.verification_token,
        }),
      );
      setTimeout(() => {
        setAuthStage("verify_email");
      }, 200);
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    dispatch(
      addForgetPassword({
        phone: values?.phone,
        phone_code: values?.phone_code,
      }),
    );
    await mutate({ ...values });
  }

  return (
    <ScrollArea className="grow " dir={locale === "en" ? "ltr" : "rtl"}>
      <div className="h-[300px] flex flex-col pe-2 py-2">
        <div className="mb-3">
          <h3 className="text-text-primary lg:text-2xl text-lg font-medium mb-3 text-center">
            {t("Text.change_phone_title")}
          </h3>
          <p className="text-secondarytext text-[14px] text-center">
            {t("Text.change_phone_desc")}
          </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.save")}
                buttonType="submit"
                loader={isLoading}
                disabled={isLoading}
                button
                className=" !w-full !h-[56px] !rounded-xl  !mt-[20px]"
              />
            </div>
          </form>
        </Form>
      </div>
    </ScrollArea>
  );
};

export default ChangeEmailForm;