"use client";

import React, { useRef, useState } from "react";
import xButton from "@/images/icon-x.svg";
import useTextsBasedOnActivityState from "@/sections/ModalSignIn/useTextsBasedOnActivityState";
import ModalSignInForm, {
  FormRefMethods,
} from "@/sections/ModalSignIn/ModalSignInForm";
import SuccessModal from "@/sections/SuccessModal";
import LoadingModal from "@/sections/LoadingModal";
import Image from "next/image";
import { ModalStatus } from "@/types";

function ModalSignIn() {
  const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
  const { textOnUse, whenModalOpens } = useTextsBasedOnActivityState(setStatus);
  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=""
        onChange={whenModalOpens}
      />
      <label htmlFor="sign-in-modal" className="modal cursor-pointer">
        <label className="modal-box relative bg-gray-850 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"
            >
              <Image
                className="rounded-full p-1 hover:bg-gray-500"
                src={xButton}
                alt={""}
              />
            </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="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">
                {textOnUse.title}
              </h3>
              <p className="text-xs text-white 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;