"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 PasswordController from "@/shared/form-controls/PasswordController";
import { useRouter } from "nextjs-toploader/app";
import { useSelector } from "react-redux";
import { Form } from "@/shared/ui/form";
import AppButton from "@/shared/buttons/AppButton";
import Swal from "sweetalert2";
import { UseMutate } from "@/hooks/UseMutate";
import { RootState } from "@/store/store";
import { useEffect } from "react";
import Success from "@/assets/images/success.gif";
import LocalePath from "@/shared/LocalePath";
export default function ChangePassword() {
  const t = useTranslations("");
  const locale = useLocale();

  const router = useRouter();
  const { storedValues } = useSelector(
    (state: RootState) => state.ForgetConfig,
  );

  const formSchema = yup.object({
    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: {
      password: "",
      password_confirmation: "",
    },
  });

  const { mutate, isLoading } = UseMutate({
    endpoint: "client/auth/reset-password",
    onSuccess: async (responseData: any) => {
      await Swal.fire({
        title: responseData?.message,
        timer: 3000,
        showConfirmButton: false,
        imageUrl: `${Success.src}`,
        customClass: {
          popup: "custom-popup-class",
          title: "custom-title-class",
        },
        padding: "1rem",
      });
      setTimeout(() => {
        router.replace(`${locale == "ar" ? "" : "/en"}/auth/login`);
      }, 500);
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    const finalOut = {
      ...values,
      token: storedValues?.verification_token,
    };
    mutate({ ...finalOut });
  }
  useEffect(() => {
    if (!storedValues?.verification_token) {
      router.replace(`${locale == "ar" ? "" : "/en"}/auth/login`);
    }
  }, [storedValues?.verification_token]);
  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 text-center">
          {t("Text.Set a new password")}
        </h3>
      </div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex flex-col gap-4">
            <PasswordController
              name="password"
              label="password"
              placeholder="password"
            />

            <PasswordController
              name="password_confirmation"
              label="password_confirmation"
              placeholder="password_confirmation"
            />
          </div>

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