import { Button as e } from "../../../atomic/atoms/button/Button.js";
import { Input as t } from "../../../atomic/atoms/input/Input.js";
import { ModalCloseSvg as n } from "../../../icons/ModalCloseSvg.js";
import { backdrop as r, closeButton as i, drawer as a, drawerContainer as o, header as s, searchRow as c, sections as l, subtitle as u, title as d, titleBlock as f } from "./backofficeFilterDrawer.css.js";
import { useEffect as p, useId as m, useRef as h } from "react";
import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
import { useTranslation as y } from "react-i18next";
import { createPortal as b } from "react-dom";
//#region src/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.tsx
var x = ({ isOpen: x, title: S, sections: C, searchValue: w, emptyLabel: T, onSearchChange: E, onClose: D, onReset: O }) => {
	let { t: k } = y("ui"), A = m(), j = m(), M = S ?? k("backoffice.filterDrawer.title"), N = h(null), P = h(null), F = h(D), I = h(null);
	if (p(() => {
		F.current = D;
	}, [D]), p(() => {
		if (!x) return () => {};
		let e = null;
		document.activeElement instanceof HTMLElement && (e = document.activeElement), I.current = e;
		let t = window.setTimeout(() => {
			N.current?.focus();
		}, 0), n = (e) => {
			if (e.key === "Escape") {
				F.current();
				return;
			}
			if (e.key !== "Tab") return;
			let t = P.current;
			if (t == null) return;
			let n = Array.from(t.querySelectorAll([
				"a[href]",
				"button:not([disabled])",
				"input:not([disabled])",
				"select:not([disabled])",
				"textarea:not([disabled])",
				"[tabindex]:not([tabindex=\"-1\"])"
			].join(","))).filter((e) => e.offsetParent != null), r = n[0], i = n[n.length - 1];
			if (r == null || i == null) {
				e.preventDefault(), t.focus();
				return;
			}
			if (e.shiftKey && document.activeElement === r) {
				e.preventDefault(), i.focus();
				return;
			}
			!e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus());
		};
		return window.addEventListener("keydown", n), () => {
			window.clearTimeout(t), window.removeEventListener("keydown", n), I.current?.focus(), I.current = null;
		};
	}, [x]), !x) return null;
	let L = C.reduce((e, t) => e + t.items.length, 0), R = null;
	E != null && (R = /* @__PURE__ */ _(t, {
		id: j,
		name: "backoffice-filter-drawer-search",
		value: w ?? "",
		onChange: (e) => {
			E(e.target.value);
		},
		placeholder: k("backoffice.filterDrawer.searchPlaceholder"),
		"aria-label": k("backoffice.filterDrawer.searchAriaLabel"),
		size: "small",
		fullWidth: !0
	}));
	let z = null;
	O != null && (z = /* @__PURE__ */ _(e, {
		type: "button",
		variant: "secondary",
		size: "small",
		onClick: O,
		children: k("backoffice.filterDrawer.reset")
	}));
	let B = /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("div", {
		className: r,
		onClick: D
	}), /* @__PURE__ */ _("div", {
		className: o,
		onClick: D,
		children: /* @__PURE__ */ v("aside", {
			ref: P,
			className: a,
			role: "dialog",
			"aria-modal": "true",
			"aria-labelledby": A,
			tabIndex: -1,
			onClick: (e) => {
				e.stopPropagation();
			},
			children: [
				/* @__PURE__ */ v("div", {
					className: s,
					children: [/* @__PURE__ */ v("div", {
						className: f,
						children: [/* @__PURE__ */ _("div", {
							id: A,
							className: d,
							children: M
						}), /* @__PURE__ */ _("div", {
							className: u,
							children: k("backoffice.filterDrawer.subtitle", { count: L })
						})]
					}), /* @__PURE__ */ _("button", {
						ref: N,
						type: "button",
						className: i,
						onClick: D,
						"aria-label": k("backoffice.filterDrawer.closeAriaLabel"),
						children: /* @__PURE__ */ _(n, {
							width: 18,
							height: 18,
							"aria-hidden": "true"
						})
					})]
				}),
				/* @__PURE__ */ v("div", {
					className: c,
					children: [R, z]
				}),
				/* @__PURE__ */ v("div", {
					className: l,
					children: [C.length === 0 && /* @__PURE__ */ _("div", {
						className: "ck62y2i txvbqbwwy txvbqb2tz txvbqb28o txvbqb2sj txvbqb1d9 txvbqb1b81 txvbqb1bg3 txvbqb9j txvbqb18dp",
						children: T ?? k("backoffice.filterDrawer.empty")
					}), C.length > 0 && C.map((e) => {
						let t = null;
						return e.description != null && (t = /* @__PURE__ */ _("div", {
							className: "ck62y2f txvbqb9j txvbqb1bg3",
							children: e.description
						})), /* @__PURE__ */ v("section", {
							className: "ck62y2c txvbqbfpn txvbqbh4x txvbqbhdl",
							children: [/* @__PURE__ */ v("div", {
								className: "ck62y2d txvbqbfpn txvbqbh4x txvbqbhd8",
								children: [/* @__PURE__ */ _("div", {
									className: "ck62y2e txvbqb96 txvbqb6a txvbqbmvu txvbqb1bg5 txvbqbhbf",
									children: e.title
								}), t]
							}), /* @__PURE__ */ _("div", {
								className: "ck62y2g txvbqbfpn txvbqbh4x txvbqbhdl",
								children: e.items.map((e) => /* @__PURE__ */ _("div", {
									className: "ck62y2h txvbqbfpn txvbqbh4x",
									children: e.node
								}, e.id))
							})]
						}, e.id);
					})]
				})
			]
		})
	})] });
	return typeof document > "u" ? B : b(B, document.body);
};
//#endregion
export { x as BackofficeFilterDrawer, x as default };

//# sourceMappingURL=BackofficeFilterDrawer.js.map