import React, { useEffect } from "react";
import "./modal-styles.scss";

import { ModalProps } from "@app/models/components";
import Button from "../button/Button";
import Card from "../card/Card";
import { CloseIcon } from "@app/assets/images/icons";
import CardHeader from "../card-header/CardHeader";
import CardContent from "../card-content/CardContent";
import CardSection from "../card-section/CardSection";

const Modal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  title = "",
  modalActions,
  children,
}) => {
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    }

    return () => {
      document.body.style.overflow = "auto";
    };
  }, [isOpen]);
  if (!isOpen) return null;
  return (
    <>
      {title && children && (
        <div className="modal-overlay" onClick={onClose}>
          <Card
            elevation={false}
            id="modal-content"
            onClick={(e) => e.stopPropagation()}
          >
            <span className="close-button" onClick={onClose}>
              {CloseIcon}
            </span>
            {title && <CardHeader padding="md" title={title} />}
            <CardContent padding="md">
              <CardSection padding="md">
                {children}
                {!!modalActions?.length && (
                  <div className="modal-actionsWrapper">
                    {modalActions.map((buttonProps) => (
                      <Button {...buttonProps} />
                    ))}
                  </div>
                )}
              </CardSection>
            </CardContent>
          </Card>
        </div>
      )}
    </>
  );
};

export default Modal;