import { useForm } from "react-hook-form";
import { useChangePassword } from "../../../utils/hooks";
import Swal from "sweetalert2";
import { useState } from "react";
import UseFullScreenLoader from "../../../hooks/UseFullScreenLoader";
import { useRouter } from "next/router";
import PasswordInput from "../../login/PasswordInput";

const ChangePasswordForm = () => {
  const router = useRouter();
  const [getLoading, setLoading] = useState<boolean>(false);
  const {
    register,
    watch,
    formState: { errors },
    handleSubmit,
    reset,
  } = useForm<ChangePasswordFormType>();

  const newPassword = watch("newPassword");

  // change password handler
  const handleChangePassword = async (data: ChangePasswordFormType) => {
    try {
      setLoading(true);
      const { resp } = (await useChangePassword(data)) as any;
      setLoading(false);
      const ok = await Swal.fire({
        title: "Success",
        text: resp.message,
        icon: "success",
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Ok",
      });
      if (ok.isConfirmed) {
        reset();
        router.push("/logout");
      }
    } catch (err: any) {
      setLoading(false);
      await Swal.fire({
        title: "Failed",
        text: err.resp.message,
        icon: "error",
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Ok",
      });
    }
  };

  const getPasswordStrength = (password: string) => {
    if (!password) return { label: "", color: "transparent" };

    const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&]).{8,}$/;
    const mediumRegex =
      /^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[A-Z])(?=.*\d))|((?=.*[a-z])(?=.*\d))).{6,}$/;

    if (strongRegex.test(password)) {
      return { label: "Strong", color: "green" };
    } else if (mediumRegex.test(password)) {
      return { label: "Medium", color: "orange" };
    } else {
      return { label: "Weak", color: "red" };
    }
  };

  return (
    <>
      {getLoading && <UseFullScreenLoader text={"Loading..."} />}
      <form
        className="default-form"
        onSubmit={handleSubmit(handleChangePassword)}
      >
        <div className="row">
          {/* <!-- Input --> */}
          <div className="form-group col-lg-7 col-md-12">
            <label>Old Password </label>
            <PasswordInput
              name="oldPassword"
              autoComplete="password"
              register={register as any}
              placeholder=""
              settings={{
                required: "Password is required.",
                minLength: {
                  value: 8,
                  message: "Password should be at least 8 characters.",
                },
                pattern: {
                  value: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,}$/,
                  message:
                    "Password must contain at least one letter, one number, and one special character",
                },
              }}
            />
            {errors.oldPassword && (
              <p className="text-danger">{errors.oldPassword.message}</p>
            )}
          </div>

          {/* <!-- Input --> */}
          <div className="form-group col-lg-7 col-md-12">
            <label>New Password</label>
            <PasswordInput
              name="newPassword"
              autoComplete="password"
              register={register as any}
              placeholder=""
              settings={{
                required: "This field is required.",
                minLength: {
                  value: 8,
                  message: "New Password should be at least 8 characters.",
                },
                pattern: {
                  value:
                    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z0-9]).{8,}$/,
                  message:
                    "Password must contain at least one number, one uppercase letter, one lowercase letter, and one special character",
                },
              }}
            />
            {errors.newPassword && (
              <p className="text-danger">{errors.newPassword.message}</p>
            )}

            {newPassword && (
              <p>
                Password Strength:{" "}
                <span
                  style={{
                    color: getPasswordStrength(newPassword).color,
                  }}
                >
                  {getPasswordStrength(newPassword).label}
                </span>
              </p>
            )}
          </div>

          {/* <!-- Input --> */}
          <div className="form-group col-lg-7 col-md-12">
            <label>Confirm Password</label>
            <PasswordInput
              name="confirmPassword"
              autoComplete="password"
              register={register as any}
              placeholder=""
              settings={{
                required: "This field is required",
                minLength: {
                  value: 8,
                  message: "Confirm Password should be at least 8 characters.",
                },
                pattern: {
                  value: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,}$/,
                  message:
                    "Confirm Password must contain at least one letter, one number, and one special character.",
                },
                validate: (value: string) =>
                  value === newPassword || "Passwords do not match",
              }}
            />
            {errors.confirmPassword && (
              <p className="text-danger">{errors.confirmPassword.message}</p>
            )}
          </div>

          {/* <!-- Input --> */}
          <div className="form-group col-lg-6 col-md-12">
            <button type="submit" className="theme-btn btn-style-one">
              Update
            </button>
          </div>
        </div>
      </form>
    </>
  );
};

export default ChangePasswordForm;