"use client";

import React, { useState } from "react";
import SuccessModal from "../../sections/SuccessModal";
import LoadingModal from "../../sections/LoadingModal";
import xButton from "@/images/icon-x.svg";
import ModalLearnMoreForm from "../../sections/ModalLearnMore/ModalLearnMoreForm";
import Image from "next/image";
import { ModalStatus } from "@/types";

function ModalLearnMore() {
  const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
  const whenModalOpens = () =>
    setTimeout(() => setStatus(ModalStatus.Default), 500);

  return (
    <>
      <input
        type="checkbox"
        id="learn-more-modal"
        className="modal-toggle"
        onChange={whenModalOpens}
      />
      <label htmlFor="learn-more-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={() => setStatus(ModalStatus.Default)}
              htmlFor="learn-more-modal"
              className="cursor-pointer"
            >
              <Image
                className="rounded-full p-1 hover:bg-gray-500"
                src={xButton}
                alt="learnmore"
              />
            </label>
          </div>
          <div className={status === "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="bg-base-content pt-4 pb-2 text-lg md:text-3xl pt-6">
                Want to learn more? Get the no-nonsense facts straight from the
                source
              </h3>
              <p className="text-xs bg-base-content md:text-base">
                Enter your email and we will email you a copy of our Whitepaper
              </p>
            </div>

            <ModalLearnMoreForm setStatus={setStatus} />
          </div>
          {status === ModalStatus.Success && <SuccessModal />}
          {status === ModalStatus.Loading && <LoadingModal />}
        </label>
      </label>
    </>
  );
}

export default ModalLearnMore;