import CustomButton from "@/components/common/CustomButton";
import CustomInput from "@/components/common/CustomInput";
import { Card } from "@/components/ui/card";
import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useUpdatePassword } from "../hooks/useUpdatePassword";
import { UpdatePasswordType } from "@/type/authType";

const UpdatePassword = () => {
  const { updatePassword, isSuccess } = useUpdatePassword();

  const {
    control,
    register,
    watch,
    reset,
    formState: { errors },
    handleSubmit,
  } = useForm<UpdatePasswordType>();

  const newPassword = watch("password");

  const onSubmit = (data: UpdatePasswordType) => {
    if (data.password !== data.password_confirmation) {
      return;
    }

    updatePassword({
      current_password: data.current_password,
      password: data.password,
      password_confirmation: data.password_confirmation,
    });
  };

  useEffect(() => {
    if (isSuccess) {
      reset();
    }
  }, [isSuccess, reset]);

  return (
    <div>
      <Card className="font-poppins flex w-full flex-row gap-5 border-none px-5">
        <div>
          <h1 className="font-inter w-[200] text-[20px] font-extrabold whitespace-nowrap">
            Change Password
          </h1>
          <p className="font-poppins text-[16px] font-light">Once in 90 days</p>
        </div>

        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex w-full flex-col gap-5"
        >
          <div className="flex w-full flex-row items-end gap-5">
            <div className="flex w-full flex-col gap-5">
              <CustomInput
                label="Old Password"
                isRequired
                name="current_password"
                control={control}
                register={register}
                errors={errors}
                isPassword
                placeHolder="Enter old password"
                rules={{
                  required: "Enter your Old password",

                  minLength: {
                    value: 8,
                    message: "Password must be at least 8 characters",
                  },
                }}
              />

              <CustomInput
                label="New Password"
                isRequired
                name="password"
                control={control}
                register={register}
                errors={errors}
                isPassword
                placeHolder="Enter new password"
                rules={{
                  required: "Please enter your new password",

                  minLength: {
                    value: 8,
                    message: "Password must be at least 8 characters",
                  },
                }}
              />
            </div>

            <div className="flex w-full flex-row gap-5">
              <CustomInput
                label="Re-Type Password"
                isRequired
                name="password_confirmation"
                control={control}
                register={register}
                errors={errors}
                isPassword
                placeHolder="Re-Type new password"
                rules={{
                  required: "Please confirm your password",

                  validate: (value: string) =>
                    value === newPassword || "Passwords do not match",
                  minLength: {
                    value: 8,
                    message: "Password must be at least 8 characters",
                  },
                }}
              />
            </div>
          </div>

          <div className="mt-5 w-50">
            <CustomButton
              btnText="Save Changes"
              type="submit"
              addAnimation={false}
              className="bg-dark-button hover:bg-dark-button"
              disabled={isSuccess}
            />
          </div>
        </form>
      </Card>
    </div>
  );
};

export default UpdatePassword;