"use client";
// TODO: Needs a complete rework to use the DaisyUI component

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

function ModalSignUp() {
  const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
  const { textOnUse, companySizeList, whenModalOpens, getPriceId } =
    useTextsBasedOnActivityState(setStatus);
  const formRef = useRef<FormRefMethods>(null);
  const handleCloseModal = () => {
    if (formRef.current) {
      formRef.current.resetForm();
    }
    setStatus(ModalStatus.Default);
  };

  return (
    <>
      <input
        type="checkbox"
        id="sign-up-modal"
        className="modal-toggle"
        name=""
        onChange={whenModalOpens}
      />
      <label htmlFor="sign-up-modal" className="modal cursor-pointer">
        <label className="modal-box relative bg-gray-100 dark: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-up-modal"
              className="cursor-pointer"
            >
              <Image
                className="rounded-full p-1 hover:bg-gray-500"
                src={xButton}
                alt="image"
              />
            </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>

            <ModalSignUpForm
              generateCheckoutSession={false}
              companySizeList={companySizeList}
              textOnUse={textOnUse}
              setStatus={setStatus}
              getPriceId={getPriceId}
              ref={formRef}
            />
          </div>
          {status === ModalStatus.Success && <SuccessModal />}
          {status === ModalStatus.Loading && <LoadingModal />}
        </label>
      </label>
    </>
  );
}

export default ModalSignUp;