import classNames from "classnames";
import { emulateTab } from "emulate-tab";
import React, { useContext, useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import {
  EditorContext,
  ModalServiceContext,
  RicosContext,
  ZIndexContext
} from "./../../ricos-context/index.js";
import { unreachable } from "./../../_shared/uncreachable.js";
import { Dialog } from "../components/dialog.js";
import { Drawer } from "../components/drawer.js";
import { Floating } from "../components/floating.js";
import { Fullscreen } from "../components/fullscreen.js";
import classes from "../statics/styles/popper-scss.js";
const layoutMapper = {
  drawer: Drawer,
  fullscreen: Fullscreen,
  dialog: (props) => /* @__PURE__ */ React.createElement(Dialog, { ...props }),
  floating: Floating,
  manual: ({ children }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children)
};
const useForceUpdate = () => {
  const [_, setValue] = useState(0);
  return () => setValue((value) => value + 1);
};
const ModalPopper = ({ modalConfig, setModalRef }) => {
  const [isVisible, setIsVisible] = useState(false);
  const forceUpdate = useForceUpdate();
  const modalService = useContext(ModalServiceContext) || {};
  const zIndexService = useContext(ZIndexContext);
  const {
    adapter: { tiptapEditor }
  } = useContext(EditorContext);
  const { languageDir, portal, isMobile } = useContext(RicosContext);
  const stoppedKeyDownPropagationRef = useRef(null);
  useEffect(() => {
    tiptapEditor.on("update", forceUpdate);
    return () => {
      tiptapEditor.off("update", forceUpdate);
    };
  }, []);
  useEffect(() => {
    setIsVisible(true);
  }, []);
  const closeModal = () => modalService?.closeModal?.(modalConfig.id);
  const onKeyDown = (e) => {
    if (modalConfig.disableCloseOnEscape !== true && e.key === "Escape") {
      e.preventDefault();
      if (modalConfig.onClickOutside && typeof modalConfig.onClickOutside === "function") {
        modalConfig.onClickOutside(e);
        return;
      }
      e.stopPropagation();
      stoppedKeyDownPropagationRef.current = e.key;
      closeModal();
      return;
    }
    if (modalConfig.disableArrowNavigation) {
      return;
    }
    if (e.key === "ArrowDown") {
      emulateTab();
      e.preventDefault();
    } else if (e.key === "ArrowUp") {
      emulateTab.backwards();
      e.preventDefault();
    }
  };
  const onKeyUp = (e) => {
    if (stoppedKeyDownPropagationRef.current === e.key) {
      e.stopPropagation();
      stoppedKeyDownPropagationRef.current = null;
    }
  };
  const resolveLayout = (layout2) => {
    if (typeof layout2 === "object") {
      return isMobile ? layout2.mobile : layout2.desktop;
    }
    return layout2;
  };
  const layout = resolveLayout(modalConfig.layout);
  const layoutToZIndex = () => {
    switch (layout) {
      case "drawer":
        return "DRAWER";
      case "dialog":
      case "fullscreen":
      case "floating":
      case "manual":
        return "DIALOG";
      default:
        unreachable(layout);
        return "DIALOG";
    }
  };
  const getZIndex = () => zIndexService.getZIndex(layoutToZIndex());
  const ModalLayout = layoutMapper[layout];
  const ModalComponent = modalConfig.Component;
  if (!portal) {
    return null;
  }
  return ReactDOM.createPortal(
    /* @__PURE__ */ React.createElement(
      "div",
      {
        "data-hook": "modal-popper",
        dir: languageDir,
        onKeyDown,
        onKeyUp,
        className: classNames(classes.container, {
          [classes.transparent]: !isVisible && modalConfig.withTransition
        })
      },
      /* @__PURE__ */ React.createElement(ModalLayout, { closeModal, modalConfig, zIndex: getZIndex() }, /* @__PURE__ */ React.createElement(
        ModalComponent,
        {
          ref: setModalRef,
          ...{ closeModal, modalConfig, zIndex: getZIndex() },
          ...modalConfig.componentProps || {}
        }
      ))
    ),
    portal
  );
};
export {
  ModalPopper
};
//# sourceMappingURL=modal-popper.js.map
