"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 FormInput from "@/shared/form-controls/FormInput";
import AppButton from "@/shared/buttons/AppButton";
import { useRouter } from "nextjs-toploader/app";
import FormPhoneNumber from "@/shared/form-controls/FormPhoneNumber";
import PasswordController from "@/shared/form-controls/PasswordController";
import LocalePath from "@/shared/LocalePath";
import { UseMutate } from "@/hooks/UseMutate";
import { useDispatch } from "react-redux";
import { addForgetPassword } from "@/store/forget.slice";

const Register: React.FC = () => {
  const t = useTranslations("");
  const locale = useLocale();

  const formSchema = yup.object({
    full_name: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.full_name") }),
      )
      .matches(
        /^\s*\S+(?:\s+\S+)+\s*$/,
        t("validations.The value must be two words"),
      )
      .max(
        250,
        t("validations.The full name must be less than 250 characters"),
      ),
    email: yup
      .string()
      .matches(
        /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
        t("validations.invalid_email_address"),
      )
      .required(t("validations.requiredField", { field: t("LABELS.email") })),
    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(),
    password: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.password") }),
      ),
    password_confirmation: yup
      .string()
      .required(t("validations.Please confirm your password"))
      .oneOf(
        [yup.ref("password"), null as any],
        t("validations.Passwords don't match"),
      ),
  });

  const form = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: {
      full_name: "",
      email: "",
      phone: "",
      phone_limit: 9,
      phone_code: "",
      password: "",
      password_confirmation: "",
    },
  });
  const dispatch = useDispatch();
  const router = useRouter();

  const { mutate, isLoading } = UseMutate({
    endpoint: "client/auth/register",
    onSuccess: async (data: any) => {
      await dispatch(
        addForgetPassword({
          verification_token: data?.data?.verification_token,
        }),
      );
      router.replace(`${locale == "ar" ? "" : "/en"}/auth/verify-code-email`);
    },
  });

  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    await dispatch(addForgetPassword({ email: values.email }));
    await mutate({ ...values, name: values.full_name });
  }

  return (
    <div className="flex flex-col gap-3  lg:w-[450px] md:[550px] w-[300px] h-fit py-2">
      <div className="mb-3 space-y-2">
        <h3 className="text-text-primary lg:text-2xl text-lg font-medium text-center">
          {t("Text.create_account")}
        </h3>
        <p className="text-text-secondary  text-sm font-medium text-center">
          {t("Text.join_vibes_family")}
        </p>
      </div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex flex-col gap-2">
            <FormInput
              name="full_name"
              label="full_name"
              placeholder="full_name"
            />
            <FormInput name="email" label="email" placeholder="email" />
            <FormPhoneNumber name="phone" label="phone" />
            <PasswordController
              name="password"
              label="password"
              placeholder="password"
            />
            <PasswordController
              name="password_confirmation"
              label="password_confirmation"
              placeholder="password_confirmation"
            />
          </div>

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

export default Register;