"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
const ReactDOM = require("react-dom");
const ModalWrap = require("./ModalWrap.js");
const index = require("../../Button/Button/index.js");
require("../../Button/NormalButton/style.js");
require("../../Button/SmallButton/style.js");
const useClickOutSide = require("../../../utils/useClickOutSide.js");
const usePortal = require("../../../utils/usePortal.js");
const uuid = require("../../../utils/uuid.js");
const Modal = ({
  children,
  onCancel,
  onOk,
  id = uuid.uuid(),
  controlVisible = false,
  showCloseButton = false,
  canClickOutsideToClose = true,
  hiddenScroll = true,
  portal = false,
  parentId = "root",
  trigger,
  mask = false
}) => {
  const [visible, setVisible] = React.useState(controlVisible);
  const modalRef = React.useRef(null);
  const triggerDom = React.useMemo(() => {
    if (!trigger) {
      return null;
    }
    return React.cloneElement(trigger, {
      key: "trigger",
      ...trigger.props,
      onClick: async (e) => {
        var _a, _b;
        setVisible(!visible);
        (_b = (_a = trigger.props) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
      }
    });
  }, [setVisible, trigger, visible]);
  const handleClose = () => {
    setVisible(false);
  };
  useClickOutSide.useClickOutside(modalRef, () => {
    if (canClickOutsideToClose) {
      handleClose();
    }
  });
  React.useEffect(() => {
    if (visible && hiddenScroll) {
      document.body.style.overflow = "hidden";
      document.body.style.paddingRight = "15px";
    } else {
      document.body.style.overflow = "auto";
      document.body.style.paddingRight = "0px";
    }
  }, [visible, id]);
  const target = usePortal(parentId);
  const elements = /* @__PURE__ */ jsxRuntime.jsx(ModalWrap.ModalWrap, { visible, mask, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: "maskContainer", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modalContainer", ref: modalRef, children: [
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "headerContainer", children: showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
      index.Button,
      {
        onClick: () => {
          handleClose();
        },
        minWidth: 20,
        type: "text",
        label: "X"
      }
    ) }),
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        onClick: (e) => {
          e.stopPropagation();
        },
        className: "childrenContainer",
        children
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "footerContainer", children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        index.Button,
        {
          label: "cancel",
          onClick: () => {
            handleClose();
            onCancel == null ? void 0 : onCancel();
          },
          style: { marginRight: 10 }
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        index.Button,
        {
          label: "ok",
          type: "primary",
          onClick: () => {
            handleClose();
            onOk == null ? void 0 : onOk();
          }
        }
      )
    ] })
  ] }) }) });
  return portal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    triggerDom,
    ReactDOM.createPortal(elements, target)
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    triggerDom,
    elements
  ] });
};
exports.Modal = Modal;
//# sourceMappingURL=index.js.map
