import Modal from "@mui/material/Modal";
import { useCallback, useEffect, useState } from "react";
import { motion } from "framer-motion";
import { IoClose } from "react-icons/io5";
import Button from "../../components/button";
import { MuiModalProps } from "../../types/props";

export default function MuiModal({
  isOpenModal,
  setIsOpenModal,
  title,
  nameService,
  submitText,
  submitOnClick,
  disabled,
  handleCloseCustom,
  aboveSubmit,
  children,
}: MuiModalProps) {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = useCallback(() => {
    setOpen(false);
    setIsOpenModal(false);
  }, [setIsOpenModal]);

  useEffect(() => {
    if (isOpenModal) handleOpen();
    else handleClose();
  }, [isOpenModal, handleClose]);

  return (
    <div>
      <Modal
        open={open}
        onClose={handleCloseCustom || handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        className="relative w-full h-full flex justify-center items-center !border-none !outline-none !ring-0 overflow-y-auto p-4"
      >
        <motion.div
          className="max-md:w-72 md:w-80 lg:w-96 max-h-[90vh] shadow-xl shadow-[rgb(20,20,20)] bg-[rgb(20,20,20,0.99)] rounded-lg p-4 relative flex flex-col justify-between items-center gap-4 my-auto overflow-y-auto"
          initial={{ y: "-100vw", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <motion.div className="w-full h-full flex gap-2 justify-between">
            <h1 className="text-lg md:text-xl font-bold">
              {title && title}
              {nameService && (
                <span className="text-secondTheme"> {nameService} </span>
              )}
            </h1>
            <button onClick={handleCloseCustom || handleClose}>
              <IoClose className="w-7 h-7" />
            </button>
          </motion.div>
          <motion.div className="w-full flex-1 flex flex-col justify-between text-center items-center overflow-y-auto">
            {children}
          </motion.div>
          <motion.div className="w-full h-full flex flex-col gap-2">
            {aboveSubmit && (
              <div className="w-full flex justify-center">{aboveSubmit}</div>
            )}
            <motion.div
              className={`w-full h-full flex ${
                submitText ? "justify-end" : "justify-center"
              } items-center gap-2 md:gap-3 text-lg md:text-xl`}
            >
              <Button onClick={handleCloseCustom || handleClose}> بستن </Button>
              {submitText && (
                <Button
                  extra={`${disabled && "!bg-slate-300"}`}
                  onClick={submitOnClick}
                  disabled={disabled}
                >
                  {" "}
                  {submitText}{" "}
                </Button>
              )}
            </motion.div>
          </motion.div>
        </motion.div>
      </Modal>
    </div>
  );
}