"use client";

import React, { useRef, useState } from "react";
import ModalSignInForm, {
  FormRefMethods,
} from "@/sections/ModalSignIn/ModalSignInForm";
import SuccessModal from "@/sections/SuccessModal";
import LoadingModal from "@/sections/LoadingModal";
import { ModalStatus } from "@/types";
import Icon from "@/components/icon";

function ModalSignIn() {
  const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
  const formRef = useRef<FormRefMethods>(null);
  const handleCloseModal = () => {
    if (formRef.current) {
      formRef.current.resetForm();
    }
    setStatus(ModalStatus.Default);
  };
  return (
    <>
      <input
        type="checkbox"
        id="sign-in-modal"
        className="modal-toggle"
        name=""
      />
      <label htmlFor="sign-in-modal" className="modal cursor-pointer">
        <label className="modal-box relative bg-gray-100  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
          <div className="flex justify-end pb-2 select-none">
            <label
              onClick={handleCloseModal}
              htmlFor="sign-in-modal"
              className="cursor-pointer"
            >
              <Icon name="Dismiss20Filled" size="medium" />
            </label>
          </div>
          <div className={status === ModalStatus.Default ? "block" : "hidden"}>
            <div
              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
              data-aos="fade-up"
            >
              <h3 className="pt-4 pb-2 text-lg md:text-3xl pt-6">
                {/* {textOnUse.title} */}
              </h3>
              <p className="text-xs md:text-base">
                {/* {textOnUse.subTitle} */}
              </p>
            </div>
            {/* <ModalSignInForm
              textOnUse={"textOnUse"}
              setStatus={setStatus}
              ref={formRef}
            /> */}
          </div>
          {status === ModalStatus.Success && <SuccessModal />}
          {status === ModalStatus.Loading && <LoadingModal />}
        </label>
      </label>
    </>
  );
}

export default ModalSignIn;