import "@emotion/react";
import React__default, { useState, useRef, useMemo, useEffect } from "react";
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
import { createPortal } from "react-dom";
import { ModalWrap } from "./ModalWrap.js";
import { Button } from "../../Button/Button/index.js";
import "../../Button/NormalButton/style.js";
import "../../Button/SmallButton/style.js";
import { useClickOutside } from "../hooks/useClickOutSide.js";
import { usePortal } from "../hooks/usePortal.js";
import { uuid } from "../../../utils/uuid.js";
const NormalModal = ({
  children,
  onCancel,
  onOk,
  id = uuid(),
  controlVisible = false,
  showCloseButton = false,
  canClickOutsideToClose = true,
  hiddenScroll = true,
  portal = false,
  parentId = "root",
  trigger,
  mask = false,
  cssStyle,
  className,
  style
}) => {
  const [visible, setVisible] = useState(controlVisible);
  const modalRef = useRef(null);
  const triggerDom = useMemo(() => {
    if (!trigger) {
      return null;
    }
    return React__default.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(modalRef, () => {
    if (canClickOutsideToClose) {
      handleClose();
    }
  });
  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__ */ jsx(
    ModalWrap,
    {
      visible,
      mask,
      css: cssStyle,
      className,
      style,
      children: /* @__PURE__ */ jsx("div", { id, className: "maskContainer", children: /* @__PURE__ */ jsxs("div", { className: "modalContainer", ref: modalRef, children: [
        /* @__PURE__ */ jsx("div", { className: "headerContainer", children: showCloseButton && /* @__PURE__ */ jsx(
          Button,
          {
            onClick: () => {
              handleClose();
            },
            minWidth: 20,
            type: "text",
            label: "X"
          }
        ) }),
        /* @__PURE__ */ jsx(
          "div",
          {
            onClick: (e) => {
              e.stopPropagation();
            },
            className: "childrenContainer",
            children
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "footerContainer", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              label: "cancel",
              onClick: () => {
                handleClose();
                onCancel == null ? void 0 : onCancel();
              },
              style: { marginRight: 10 }
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              label: "ok",
              type: "primary",
              onClick: () => {
                handleClose();
                onOk == null ? void 0 : onOk();
              }
            }
          )
        ] })
      ] }) })
    }
  );
  return portal ? /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerDom,
    createPortal(elements, target)
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerDom,
    elements
  ] });
};
export {
  NormalModal
};
//# sourceMappingURL=index.js.map
