import "../SplitPane.css";
import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useRef, useMemo, useEffect } from "react";
import { throttle } from "throttle-debounce";
import useResize from "./internal/useResize.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
const base = "SplitPane_base_743f1";
const rightBox = "SplitPane_rightBox_743f1";
const handle = "SplitPane_handle_743f1";
const showRightPane = "SplitPane_showRightPane_743f1";
const css = {
  base,
  rightBox,
  handle,
  showRightPane
};
const Pane = {
  Left: "left",
  Right: "right"
};
const SplitPane = ({
  leftPane,
  rightPane,
  initialWidth = 400,
  minimumWidths = { left: 200, right: 200 },
  onChange,
  hidePane
}) => {
  const [isDragging, setIsDragging] = useState(false);
  const [width, setWidth] = useState(initialWidth);
  const handle2 = useRef(null);
  const { refCallback, size } = useResize();
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const throttledOnChange = useMemo(
    () => onChange && throttle(8, onChange, { noTrailing: true }),
    [onChange]
  );
  useEffect(() => setWidth(initialWidth), [initialWidth]);
  useEffect(() => {
    const handleDragStart = (e) => {
      if (e.button !== 0)
        return;
      e.preventDefault();
      setIsDragging(true);
    };
    const handleRef = handle2.current;
    handleRef == null ? void 0 : handleRef.addEventListener("mousedown", handleDragStart);
    return () => handleRef == null ? void 0 : handleRef.removeEventListener("mousedown", handleDragStart);
  }, []);
  useEffect(() => {
    if (!isDragging)
      return;
    const handleDrag = (e) => {
      e.preventDefault();
      const pointerRelativeXpos = e.clientX - size.x;
      const newWidth = Math.round(
        Math.min(
          Math.max(minimumWidths.left, pointerRelativeXpos - 8),
          size.width - minimumWidths.right
        )
      );
      setWidth(newWidth);
      throttledOnChange == null ? void 0 : throttledOnChange(newWidth);
    };
    document.addEventListener("mousemove", handleDrag);
    return () => document.removeEventListener("mousemove", handleDrag);
  }, [size.width, size.x, throttledOnChange, isDragging, minimumWidths]);
  useEffect(() => {
    if (!isDragging)
      return;
    const handleDragStop = (e) => {
      if (e.button !== 0)
        return;
      setIsDragging(false);
      throttledOnChange == null ? void 0 : throttledOnChange.cancel();
      onChange == null ? void 0 : onChange(width);
    };
    document.addEventListener("mouseup", handleDragStop);
    return () => document.removeEventListener("mouseup", handleDragStop);
  }, [width, isDragging, onChange, throttledOnChange]);
  useEffect(() => {
    const KEYBOARD_RESIZE_INTERVAL = 4;
    const onPressKey = (event) => {
      if (document.activeElement === handle2.current) {
        if (event.key === "ArrowLeft") {
          setWidth((width2) => width2 - KEYBOARD_RESIZE_INTERVAL);
          throttledOnChange == null ? void 0 : throttledOnChange(width - KEYBOARD_RESIZE_INTERVAL);
        }
        if (event.key === "ArrowRight") {
          setWidth((width2) => width2 + KEYBOARD_RESIZE_INTERVAL);
          throttledOnChange == null ? void 0 : throttledOnChange(width + KEYBOARD_RESIZE_INTERVAL);
        }
      }
    };
    window.addEventListener("keydown", onPressKey, true);
    return () => window.removeEventListener("keydown", onPressKey, true);
  }, [throttledOnChange, width]);
  const hideHandle = hidePane !== void 0;
  const leftPaneStyle = {
    display: hidePane === Pane.Left ? "none" : "initial",
    width: hidePane !== Pane.Right ? width : "100%"
  };
  const classnames = [css.base, themeClass];
  if (hidePane !== Pane.Right) {
    classnames.push(css.showRightPane);
  }
  return /* @__PURE__ */ jsxs("div", { className: classnames.join(" "), ref: refCallback, children: [
    /* @__PURE__ */ jsx("div", { style: leftPaneStyle, children: leftPane }),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: css.handle,
        ref: handle2,
        style: { display: hideHandle ? "none" : "initial" },
        tabIndex: 0
      }
    ),
    /* @__PURE__ */ jsx("div", { className: css.rightBox, children: rightPane })
  ] });
};
export {
  Pane,
  SplitPane as default
};
