"use client";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { useTranslations, useLocale } from "next-intl";
import { Form } from "@/shared/ui/form";
import AppButton from "@/shared/buttons/AppButton";
import PasswordController from "@/shared/form-controls/PasswordController";
import LocalePath from "@/shared/LocalePath";
import { saveCredentials } from "@/store/auth.slice";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/store/store";
import { addForgetPassword } from "@/store/forget.slice";
import { useRouter } from "nextjs-toploader/app";
import { UseMutate } from "@/hooks/UseMutate";
import FormPhoneNumber from "@/shared/form-controls/FormPhoneNumber";
const Login: React.FC = () => {
  const t = useTranslations("");
  const locale = useLocale();
  const router = useRouter();

  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(),
    password: yup
      .string()
      .required(
        t("validations.requiredField", { field: t("LABELS.password") }),
      ),
  });
  const form = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: {
      phone: "",
      phone_limit: 9,
      phone_code: "",
      password: "",
    },
  });
  const dispatch = useDispatch<AppDispatch>();
  const { mutate, isLoading } = UseMutate({
    endpoint: "client/auth/login",
    onSuccess: async (responseData: any) => {
      if (responseData?.data) {
        dispatch(saveCredentials(responseData?.data));
        window.location.replace(`${locale == "ar" ? "/" : "/en"}`);
      } else {
        dispatch(
          addForgetPassword({
            phone: responseData?.phone,
            phone_code: responseData?.phone_code,
          }),
        );
        router.replace(`${locale == "ar" ? "" : "/en"}/auth/verify-code-email`);
      }
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    await mutate({ ...values });
  }
  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("BUTTONS.login")}
        </h3>
        <p className="text-text-secondary  text-sm font-medium text-center">
          {t("Text.welcome_back")}
        </p>
      </div>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex flex-col gap-4">
            <FormPhoneNumber name="phone" label="phone" />
            <PasswordController
              name="password"
              label="password"
              placeholder="password"
            />
          </div>
          <div className="!pt-2">
            <div className="flex justify-end cursor-pointer">
              <LocalePath
                href={"/auth/forget-password/verify-email"}
                className="text-primary py-1 text-sm font-normal"
              >
                {t("validations.forget_passsord")}
              </LocalePath>
            </div>

            <AppButton
              title={t("BUTTONS.login")}
              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/register"}
          className="font-medium hover:underline text-primary cursor-pointer ms-1 text-sm"
        >
          {t("BUTTONS.login_now")}
        </LocalePath>
      </p>
    </div>
  );
};

export default Login;