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

//# sourceMappingURL=NavigationSidebar.js.map