import { GAP_SPACER_CONTAINER } from "./data-hooks.js";
import styles from "./gap-spacer-styles-scss.js";
const TOOLTIP_DELAY_MS = 1e3;
let tooltipContainerElement = null;
const getTooltipContainer = () => {
  if (!tooltipContainerElement) {
    const ricosPortal = document.querySelector("[data-hook=ricos-portal]");
    tooltipContainerElement = ricosPortal || document.body;
  }
  return tooltipContainerElement;
};
const createTooltipElement = (tooltipContent) => {
  const tooltipElement = document.createElement("div");
  tooltipElement.textContent = tooltipContent;
  tooltipElement.className = styles.gapSpacerTooltip;
  return tooltipElement;
};
const positionTooltip = (tooltipElement, container) => {
  const rect = container.getBoundingClientRect();
  tooltipElement.style.left = `${rect.left + rect.width / 2}px`;
  tooltipElement.style.top = `${rect.top - 4}px`;
};
const setupTooltipHandlers = (container, tooltipContent) => {
  let tooltipElement = null;
  let hoverTimeout = null;
  const showTooltip = (_event) => {
    if (hoverTimeout) {
      clearTimeout(hoverTimeout);
    }
    hoverTimeout = setTimeout(() => {
      if (!container.matches(":hover")) {
        return;
      }
      hideTooltip();
      tooltipElement = createTooltipElement(tooltipContent);
      positionTooltip(tooltipElement, container);
      const tooltipContainer = getTooltipContainer();
      tooltipContainer.appendChild(tooltipElement);
      requestAnimationFrame(() => {
        if (tooltipElement) {
          tooltipElement.style.opacity = "1";
          tooltipElement.style.transform = "translateX(-50%) translateY(-100%) scale(1)";
        }
      });
    }, TOOLTIP_DELAY_MS);
  };
  const hideTooltip = () => {
    if (hoverTimeout) {
      clearTimeout(hoverTimeout);
      hoverTimeout = null;
    }
    if (tooltipElement) {
      tooltipElement.style.opacity = "0";
      tooltipElement.style.transform = "translateX(-50%) translateY(-100%) scale(0.8)";
      setTimeout(() => {
        if (tooltipElement) {
          tooltipElement.remove();
          tooltipElement = null;
        }
      }, 150);
    }
  };
  container.addEventListener("mouseenter", showTooltip);
  container.addEventListener("mouseleave", hideTooltip);
  container.addEventListener("mousedown", hideTooltip, true);
};
const createGapSpacerElement = ({
  onClick,
  onMouseDown,
  isFocused = false,
  tooltipContent,
  collapsed = false,
  needsTopMargin = false
}) => {
  const container = document.createElement("div");
  container.setAttribute("data-hook", GAP_SPACER_CONTAINER);
  container.setAttribute("role", "button");
  container.addEventListener("click", onClick);
  container.addEventListener("mousedown", onMouseDown);
  container.className = `${styles.gapSpacerContainer}${isFocused ? ` ${styles.gapSpacerFocused}` : ""}${collapsed ? ` ${styles.collapsed}` : ""}${needsTopMargin ? ` ${styles.withTopMargin}` : ""}`;
  const line = document.createElement("div");
  line.className = styles.gapSpacerLine;
  container.appendChild(line);
  setupTooltipHandlers(container, tooltipContent);
  return container;
};
export {
  createGapSpacerElement
};
//# sourceMappingURL=gap-spacer-html.js.map
