"use client";

import { FiMail } from "react-icons/fi";
import Input from "../../ui/CustomInput";
import Button from "../../ui/Button";
import { useAppForm } from "../../../hooks/useAppForm";
import {
  enterNewMailSchema,
  EnterNewMailSchema,
} from "../../../hooks/features/profile/email/useEnterNewMail";
import { useModal } from "../../../lib/modal-system/ModalContext";
import useSendNewEmailOtp from "../../../hooks/features/profile/email/useSendNewEmailOtp";
export default function EnterNewEmail() {
  const { openModal } = useModal();
  const { register, reset, errors, handleSubmit, getValue } =
    useAppForm<EnterNewMailSchema>({
      schema: enterNewMailSchema,
      defaultValues: {
        email: "",
      },

      onSubmit: async (data) => {
        try {
          // await handleSendNewEmailOtp({ email: getValue("email") });
          openModal("NEW_EMAIL_VERIFICATION", {
            email: getValue("email"),
          });
          reset();
        } catch (error) {}
      },
    });

  const { handleSendNewEmailOtp, loading } = useSendNewEmailOtp();

  return (
    <>
      {/* Icon */}
      <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full border border-[#E5D8FF] text-link-1 md:h-16 md:w-16">
        <FiMail size={24} />
      </div>

      {/* Heading */}
      <h2 className="mt-7 text-center font-heading text-2xl font-semibold text-heading">
        Enter new email
      </h2>

      {/* Description */}
      <p className="mx-auto mt-5 max-w-[320px] text-center font-body text-base leading-7 text-text">
        Old email verified. Now enter your new address.
      </p>

      {/* Email Field */}
      <div className="mt-8">
        <label className="mb-2 block font-body text-sm font-medium text-heading">
          New Email Address<span className="text-danger">*</span>
        </label>

        <Input
          register={register("email")}
          error={errors.email?.message}
          icon={<FiMail />}
          placeholder="Enter Your Email"
        />
      </div>

      {/* Button */}
      <Button disabled={false} className="mt-8 w-full" onClick={handleSubmit}>
        Send Verification
      </Button>
    </>
  );
}