import "@emotion/react";
import { useState, useRef, useCallback, useEffect, useMemo, cloneElement } from "react";
import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
import { createPortal } from "react-dom";
import { FullScreenMask } from "./style.js";
import iconClose from "../../../assets/icon/close.svg.js";
import { NormalButton } from "../../Button/NormalButton/index.js";
import { usePortal } from "../hooks/usePortal.js";
import { uuid } from "../../../utils/uuid.js";
function FullScreenModal({
  children,
  defaultVisible = false,
  controlVisible,
  onCancel,
  onClick,
  modalStyle,
  rootStyle,
  id = uuid(),
  showCloseButton = false,
  clickOutsideToClose = true,
  hidden = true,
  portal = false,
  trigger
}) {
  const [visible, setVisible] = useState(defaultVisible);
  const modalEle = useRef(null);
  const handleClose = 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]
  );
  useEffect(() => {
    if (controlVisible !== void 0) {
      setVisible(controlVisible);
    }
  }, [controlVisible]);
  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 = useMemo(() => {
    if (!trigger) {
      return null;
    }
    return 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__ */ jsxs(FullScreenMask, { id, visible, css: rootStyle, children: [
    /* @__PURE__ */ jsx(
      "div",
      {
        ref: modalEle,
        onClick: (e) => {
          e.stopPropagation();
          onClick && onClick();
        },
        className: "mask-modal-container",
        css: modalStyle,
        children
      }
    ),
    showCloseButton && /* @__PURE__ */ jsx(NormalButton, { className: "mask-close-button", onClick: handleClose, children: /* @__PURE__ */ jsx("img", { src: iconClose, width: "15px", height: "15px" }) })
  ] });
  return portal ? /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerDom,
    createPortal(elements, target)
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerDom,
    elements
  ] });
}
export {
  FullScreenModal
};
//# sourceMappingURL=index.js.map
