import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom";
import { ToggleButton, Tooltip } from "@wix/design-system";
import React, { useCallback, useContext, useRef, useState } from "react";
import ReactDOM from "react-dom";
import { RicosContext } from "./../ricos-context/index.js";
import styles from "./card-scss.js";
import { SplitHorizontallySmall } from "./icons/split-horizontally-small.js";
const BoundaryLine = ({
  visible,
  onSplit,
  getBoundaryWarningPortal
}) => {
  const portal = getBoundaryWarningPortal?.() ?? null;
  const { t } = useContext(RicosContext);
  const [isHovered, setIsHovered] = useState(false);
  const leaveTimer = useRef(null);
  const clearLeaveTimer = useCallback(() => {
    if (leaveTimer.current !== null) {
      clearTimeout(leaveTimer.current);
      leaveTimer.current = null;
    }
  }, []);
  const handleMouseEnter = useCallback(() => {
    clearLeaveTimer();
    setIsHovered(true);
  }, [clearLeaveTimer]);
  const handleMouseLeave = useCallback(() => {
    clearLeaveTimer();
    leaveTimer.current = setTimeout(() => {
      setIsHovered(false);
    }, 50);
  }, [clearLeaveTimer]);
  const {
    x,
    y,
    refs: { setReference, setFloating },
    strategy
  } = useFloating({
    placement: "left",
    strategy: portal ? "fixed" : "absolute",
    middleware: [
      offset(() => ({
        mainAxis: 8
      }))
    ],
    whileElementsMounted: (referenceEl, floatingEl, update) => autoUpdate(referenceEl, floatingEl, update, { animationFrame: true })
  });
  const lineClassName = `${styles.cardBoundaryLineContent}${isHovered ? ` ${styles.hovered}` : ""}`;
  const iconContent = /* @__PURE__ */ React.createElement(
    "div",
    {
      ref: setFloating,
      style: {
        position: strategy,
        top: y ?? "",
        left: x ?? "",
        zIndex: 1
      },
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave
    },
    /* @__PURE__ */ React.createElement("div", { className: `${styles.cardBoundaryWarning}${isHovered ? ` ${styles.hovered}` : ""}` }, /* @__PURE__ */ React.createElement(Tooltip, { content: t("Card_BoundaryWarning_Tooltip"), size: "small", placement: "left" }, /* @__PURE__ */ React.createElement(ToggleButton, { skin: "inverted", selected: true, tooltipDisabled: true, size: "small", onClick: onSplit }, /* @__PURE__ */ React.createElement(SplitHorizontallySmall, null))))
  );
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
    "div",
    {
      ref: setReference,
      className: lineClassName,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave
    },
    /* @__PURE__ */ React.createElement("div", { className: styles.cardBoundaryLine })
  ), visible && portal && ReactDOM.createPortal(iconContent, portal));
};
export {
  BoundaryLine
};
//# sourceMappingURL=boundary-warning.js.map
