"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 style = require("./style.js");
const close = require("../../../assets/icon/close.svg.js");
const index = require("../../Button/NormalButton/index.js");
const usePortal = require("../../../utils/usePortal.js");
function FullScreenModal({
  children,
  defaultVisible = false,
  controlVisible,
  onCancel,
  onClick,
  style: style$1,
  rootStyle,
  id,
  showCloseButton = false,
  clickOutsideToClose = true,
  hidden = true,
  portal = false,
  trigger
}) {
  const [visible, setVisible] = React.useState(defaultVisible);
  const modalEle = React.useRef(null);
  const handleClose = React.useCallback(
    (event) => {
      var _a, _b;
      if (clickOutsideToClose && visible && !((_a = modalEle.current) == null ? void 0 : _a.contains(event.target))) {
        event.stopPropagation();
        onCancel == null ? void 0 : onCancel();
        if (controlVisible === void 0) {
          setVisible(false);
          (_b = document.getElementById(id)) == null ? void 0 : _b.removeEventListener("click", handleClose);
          document.body.style.overflow = "auto";
        }
      }
    },
    [clickOutsideToClose, id, onCancel, visible]
  );
  React.useEffect(() => {
    if (controlVisible !== void 0) {
      setVisible(controlVisible);
    }
  }, [controlVisible]);
  React.useEffect(() => {
    var _a;
    if (visible) {
      document.body.style.overflow = hidden ? "hidden" : "auto";
      (_a = document.getElementById(id)) == null ? void 0 : _a.addEventListener("click", handleClose);
    } else {
      document.body.style.overflow = "auto";
    }
    return () => {
      var _a2;
      (_a2 = document.getElementById(id)) == null ? void 0 : _a2.removeEventListener("click", handleClose);
    };
  }, [onCancel, visible, id, handleClose]);
  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 target = usePortal("root");
  const elements = /* @__PURE__ */ jsxRuntime.jsxs(style.FullScreenMask, { id, visible, css: rootStyle, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ref: modalEle,
        onClick: (e) => {
          e.stopPropagation();
          onClick && onClick();
        },
        className: "mask-modal-container",
        css: style$1,
        children
      }
    ),
    showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(index.NormalButton, { className: "mask-close-button", onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: close, width: "15px", height: "15px" }) })
  ] });
  return portal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    triggerDom,
    ReactDOM.createPortal(elements, target)
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    triggerDom,
    elements
  ] });
}
exports.FullScreenModal = FullScreenModal;
//# sourceMappingURL=index.js.map
