import { cx as e } from "../../../theme/tools.js";
import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
import { ChevronLeftIcon as n, ChevronRightIcon as r } from "./icons.js";
import { childIcon as i, childIconTheme as a, childLabel as o, childLinkRecipe as s, collapseButton as c, collapseButtonLabel as l, collapseButtonStateRecipe as u, collapsibleContent as d, collapsibleContentTheme as f, collapsibleItem as ee, collapsibleSection as p, collapsibleStateRecipe as m, iconBaseLayer as h, iconHiddenOnHover as g, iconVisibleOnHover as _, iconWrapper as v, itemWrapper as y, label as te, navButton as b, navGapRecipe as x, navLinkRecipe as S, navWithTrailingAction as C, trailingActionButton as w, trailingActionIconHidden as T, trailingActionIconVisible as E, trailingActionIconWrapper as D, trailingIconWrapper as ne } from "./navigationSidebar.css.js";
import { SidebarContainer as O } from "./SidebarContainer.js";
import { useCallback as k, useMemo as A, useState as j } from "react";
import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
import F from "@plumile/router/routing/Link.js";
import I from "@plumile/router/routing/useLocation.js";
//#region src/atomic/organisms/sidebar/NavigationSidebar.tsx
var L = ({ id: t, isExpanded: n, children: r }) => {
	let i = "collapsed";
	return n && (i = "expanded"), /* @__PURE__ */ N("div", {
		id: t,
		"aria-hidden": !n,
		className: e(p, m({ state: i })),
		children: /* @__PURE__ */ N("div", {
			className: e(d, f),
			children: r
		})
	});
}, R = ({ items: d, headerSlot: f, isCollapsed: p, onCollapsedChange: m, showCollapseToggle: R = !0 }) => {
	let { t: z } = t(), [B, V] = j(!1), [H, U] = j({}), W = p != null, G = p ?? B, { pathname: K } = I(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = k((e, t) => {
		U((n) => ({
			...n,
			[e]: t
		}));
	}, []), Y = k(() => {
		let e = !G;
		W || V(e), m?.(e);
	}, [
		G,
		W,
		m
	]), X;
	G || (X = f ?? void 0);
	let Z = A(() => {
		if (!R) return null;
		let t = n, i = z("navigation.sidebar.actions.collapseAriaLabel");
		G && (t = r, i = z("navigation.sidebar.actions.expandAriaLabel"));
		let a = "expanded";
		G && (a = "collapsed");
		let o = null;
		return G || (o = /* @__PURE__ */ N("span", {
			className: l,
			children: z("navigation.sidebar.actions.collapse")
		})), /* @__PURE__ */ P("button", {
			type: "button",
			onClick: Y,
			className: e(c, u({ state: a })),
			"aria-label": i,
			children: [/* @__PURE__ */ N(t, { size: 20 }), o]
		});
	}, [
		Y,
		G,
		R,
		z
	]);
	return /* @__PURE__ */ N(O, {
		headerSlot: X,
		footerSlot: Z,
		isCollapsed: G,
		showDefaultHeaderAction: !1,
		children: d.map((t) => {
			let n = t.childItems ?? null, r = n != null && n.length > 0, c = H[t.key] ?? t.defaultExpanded ?? !1, l = !c, u, d = !G && r;
			d && (u = `navigation-sidebar-${t.key}-children`), r && n.some((e) => q(e.to)) && (c = !0);
			let f = null;
			!G && t.trailingAction != null && (f = t.trailingAction);
			let p = f != null, m = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), j;
			G && (j = t.label);
			let I = "expanded";
			G && (I = "collapsed");
			let R = x({ state: I }), z;
			p && (z = C);
			let B = null;
			G || (B = /* @__PURE__ */ N("span", {
				className: te,
				children: t.label
			}));
			let V = null;
			m && (V = /* @__PURE__ */ N("span", {
				className: _,
				children: t.hoverIcon
			}));
			let U = /* @__PURE__ */ P("span", {
				className: v,
				children: [/* @__PURE__ */ N("span", {
					className: e(h, { [g]: m }),
					children: t.icon
				}), V]
			}), W = null;
			if (A) {
				let n = null;
				O && (n = /* @__PURE__ */ N("span", {
					className: e(h, { [g]: k }),
					children: t.trailingIcon
				}));
				let r = null;
				k && (r = /* @__PURE__ */ N("span", {
					className: _,
					children: t.trailingHoverIcon
				})), W = /* @__PURE__ */ P("span", {
					className: ne,
					children: [n, r]
				});
			}
			let K = /* @__PURE__ */ P(M, { children: [
				U,
				B,
				W
			] }), Y = () => {
				!r || G || J(t.key, l);
			}, X;
			if (r) X = e(b, R, z);
			else {
				let n = "default";
				q(t.to, t.exact) && (n = "active"), X = e(S({ state: n }), R, z);
			}
			let Z;
			Z = r ? /* @__PURE__ */ N("button", {
				type: "button",
				className: X,
				"aria-expanded": c,
				"aria-controls": u,
				"aria-label": j,
				onClick: Y,
				children: K
			}) : /* @__PURE__ */ N(F, {
				to: t.to,
				className: X,
				exact: t.exact,
				"aria-label": j,
				children: K
			});
			let Q = null;
			if (f != null) {
				let e = (e) => {
					e.preventDefault(), e.stopPropagation(), f.onClick();
				}, t = f.hoverIcon, n = t != null, r = null;
				n && (r = /* @__PURE__ */ N("span", {
					className: E,
					children: t
				})), Q = /* @__PURE__ */ N("button", {
					type: "button",
					"aria-label": f.label,
					onClick: e,
					className: w,
					children: /* @__PURE__ */ P("span", {
						className: D,
						children: [/* @__PURE__ */ N("span", {
							className: T,
							children: f.icon
						}), r]
					})
				});
			}
			let $ = null;
			return d && u != null && ($ = /* @__PURE__ */ N(L, {
				id: u,
				isExpanded: c,
				children: n.map((t) => {
					let n = null;
					t.icon != null && (n = /* @__PURE__ */ N("span", {
						className: e(i, a),
						children: t.icon
					}));
					let r = "default";
					return q(t.to) && (r = "active"), /* @__PURE__ */ N("div", {
						className: ee,
						children: /* @__PURE__ */ P(F, {
							to: t.to,
							className: s({ state: r }),
							"aria-label": t.label,
							children: [n, /* @__PURE__ */ N("span", {
								className: o,
								children: t.label
							})]
						})
					}, t.key);
				})
			})), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("div", {
				className: y,
				children: [Z, Q]
			}), $] }, t.key);
		})
	});
};
//#endregion
export { R as NavigationSidebar };

//# sourceMappingURL=NavigationSidebar.js.map