import { useGlobal } from "@/context/global";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
import React, { useEffect } from "react";
import { Button } from "../ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "../ui/dialog";
import ComponentFade from "./_fade";

export const Modal = ({ id, content, closing }: GlobalModal) => {
  const { closeModal } = useGlobal();

  const [open, setOpen] = React.useState(false);

  const closeTimeoutRef = React.useRef<number>(null);

  const handleCloseModal = React.useCallback(() => {
    setOpen(false);
    closeTimeoutRef.current = window.setTimeout(() => {
      closeModal(id, true);
      closeTimeoutRef.current = undefined;
    }, 300);
  }, [closeModal, id]);

  React.useEffect(() => {
    const openTimeout = setTimeout(() => setOpen(true), 50);

    return () => {
      clearTimeout(openTimeout);
      if (closeTimeoutRef.current !== null) {
        clearTimeout(closeTimeoutRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (closing) {
      handleCloseModal();
    }
  }, [closing]);

  return (
    <Dialog
      open={true}
      onOpenChange={(e) => {
        if (!e) {
          handleCloseModal;
        }
      }}
    >
      <DialogContent
        onClickOutside={handleCloseModal}
        className="border-none bg-transparent shadow-none"
      >
        <ComponentFade target={open}>
          <DialogTitle />
          <div className="relative">
            <DialogClose asChild>
              <div className="absolute right-0 m-1">
                <Button
                  color="danger"
                  variant="soft"
                  size="xs"
                  decorator={faTimes}
                  isIcon
                  rounded
                  onClick={handleCloseModal}
                />
              </div>
            </DialogClose>
            {content}
          </div>
          <DialogDescription />
        </ComponentFade>
      </DialogContent>
    </Dialog>
  );
};