import { cx as e } from "../../theme/tools.js";
import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
import { main as n, root as r, rootSplit as i, rootStacked as a, sidePanel as o, sidePanelStacked as s } from "./ResizableSplitView.css.js";
import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
import { jsx as f, jsxs as ee } from "react/jsx-runtime";
//#region src/components/layout/ResizableSplitView.tsx
var te = 360, ne = 280, re = 320, p = .5, ie = 1024, ae = 16, oe = 64, m = (e) => {
	if (e == null || typeof window > "u") return null;
	try {
		let t = window.localStorage.getItem(e);
		if (t == null) return null;
		let n = Number(t);
		return !Number.isFinite(n) || n <= 0 ? null : n;
	} catch {
		return null;
	}
}, h = (e, t) => {
	if (!(e == null || typeof window > "u")) try {
		window.localStorage.setItem(e, String(t));
	} catch {}
}, g = (e, t, n, r) => {
	let i = e * n, a = e - r;
	return Math.max(0, Math.min(i, a, t ?? Infinity));
}, _ = (e, t, n, r, i, a) => {
	let o = g(t, r, i, a), s = Math.min(n, o);
	return o <= 0 && (s = 0), Math.max(s, Math.min(e, Math.max(s, o)));
};
function v({ className: v, defaultSidePanelWidth: y = te, main: b, mainClassName: x, maxSidePanelRatio: S = p, maxSidePanelWidth: C, minMainWidth: w = re, minSidePanelWidth: T = ne, onSidePanelWidthChange: E, resizable: D = !0, resizerLabel: se, sidePanel: O, sidePanelClassName: ce, sidePanelLabel: k, sidePanelWidth: A, stackedBreakpoint: j = ie, storageKey: M }) {
	let { t: le } = t(), N = u(null), P = u(A ?? y), F = u({
		active: !1,
		pointerId: null,
		startClientX: 0,
		startWidth: P.current
	}), [ue, de] = d(() => m(M) ?? y), [fe, pe] = d(0), [I, L] = d(!1), [R, z] = d(!1), B = A ?? ue, V = O != null, H = V && D && !R, U = c(() => {
		let e = N.current;
		return e == null ? 0 : e.getBoundingClientRect().width;
	}, []), W = c((e) => {
		let t = U();
		return t <= 0 ? e : _(e, t, T, C, S, w);
	}, [
		U,
		S,
		C,
		w,
		T
	]), G = c((e) => {
		let t = W(e);
		return P.current = t, A ?? de(t), E?.(t), t;
	}, [
		W,
		E,
		A
	]);
	l(() => {
		P.current = B;
	}, [B]), l(() => {
		let e = N.current;
		e != null && pe(e.getBoundingClientRect().width);
	}, [V, R]), l(() => {
		if (typeof window > "u") return () => {};
		let e = window.matchMedia(`(max-width: ${j - 1}px)`), t = () => {
			z(e.matches);
		};
		return t(), e.addEventListener("change", t), () => {
			e.removeEventListener("change", t);
		};
	}, [j]), l(() => {
		if (!V || R) return;
		let e = W(B);
		if (e === B) {
			P.current = e;
			return;
		}
		G(e);
	}, [
		W,
		G,
		V,
		R,
		B
	]);
	let K = c(() => {
		F.current.active && (F.current.active = !1, F.current.pointerId = null, L(!1), h(M, P.current));
	}, [M]);
	l(() => {
		if (typeof window > "u") return () => {};
		let e = (e) => {
			let t = F.current;
			if (!t.active || t.pointerId != null && e.pointerId !== t.pointerId) return;
			e.preventDefault();
			let n = t.startClientX - e.clientX;
			G(t.startWidth + n);
		}, t = (e) => {
			let t = F.current;
			t.pointerId != null && e.pointerId !== t.pointerId || K();
		};
		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", t), () => {
			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", t);
		};
	}, [G, K]);
	let q = c((e) => {
		H && (e.preventDefault(), "setPointerCapture" in e.currentTarget && e.currentTarget.setPointerCapture(e.pointerId), F.current = {
			active: !0,
			pointerId: e.pointerId,
			startClientX: e.clientX,
			startWidth: B
		}, L(!0));
	}, [H, B]), me = c((e) => {
		if (!H || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
		e.preventDefault();
		let t = ae;
		e.shiftKey && (t = oe);
		let n = -t;
		e.key === "ArrowLeft" && (n = t), h(M, G(B + n));
	}, [
		H,
		G,
		B,
		M
	]);
	if (!V) return /* @__PURE__ */ f("div", {
		ref: N,
		className: e(r, i, v),
		children: /* @__PURE__ */ f("div", {
			className: e(n, x),
			children: b
		})
	});
	let J;
	R || (J = { width: `${B}px` });
	let Y = g(fe, C, S, w), X = Math.min(T, Y);
	Y <= 0 && (X = 0);
	let he = Math.max(X, Y), ge = se ?? le("layout.pageShell.resizeSidePanel"), Z = i;
	R && (Z = a);
	let Q = "false";
	I && (Q = "true");
	let $;
	return R && ($ = s), /* @__PURE__ */ ee("div", {
		ref: N,
		className: e(r, Z, v),
		children: [
			/* @__PURE__ */ f("div", {
				className: e(n, x),
				children: b
			}),
			H && /* @__PURE__ */ f("div", {
				className: "_1sh6osj9 _1sh6osj8 txvbqbhh txvbqb1b4r txvbqbb txvbqbfwv txvbqbv9d txvbqb13i7 txvbqb19fm",
				role: "separator",
				"aria-orientation": "vertical",
				"aria-label": ge,
				"aria-valuemin": Math.round(X),
				"aria-valuemax": Math.round(he),
				"aria-valuenow": Math.round(B),
				tabIndex: 0,
				"data-active": Q,
				onPointerDown: q,
				onKeyDown: me
			}),
			/* @__PURE__ */ f("aside", {
				className: e(o, $, ce),
				"aria-label": k,
				style: J,
				children: O
			})
		]
	});
}
var y = {
	clampWidth: _,
	readStoredWidth: m,
	resolveMaxWidth: g
};
//#endregion
export { v as ResizableSplitView, y as __test };

//# sourceMappingURL=ResizableSplitView.js.map