import { h as e } from "./chunk.BlbRoQQ3.js";
import { Y as t } from "./use-page-data.Cb2SuuwJ.js";
import "./chunk-LSPN22SI.D75E3zS-.js";
import { c as n } from "./twind.BiM9xcCd.js";
import { b as r } from "./jsx-runtime.DF4K5VCp.js";
import "./chroma-js.Dcir27CH.js";
import "./color-system.Dp99zR0T.js";
import "./react.BZZIbN3T.js";
import "./iconBase.C7m0emOO.js";
import "./schema-resolver.p7B_pu36.js";
import { b as i, c as a, d as o } from "./md.Dru5DXQh.js";
import { b as s } from "./use-brick-style.DDPl-_C1.js";
import "./use-brick-manifest.Iv9SG-7-.js";
import { b as c } from "./BrickRoot.DbISziyH.js";
import { b as l } from "./use-brick-props.Db5hMGVc.js";
import { useCallback as u, useEffect as d, useState as f } from "react";
var p = /* @__PURE__ */ e(r());
function m(e) {
	let { brick: r, editable: m } = e, h = l(e), g = s(r), _ = (h.images || []).filter(({ image: e }) => typeof e.src == "string" && e.src !== ""), [v, y] = f(null), b = Number(h.columns) || 3, x = () => {
		let e = {
			1: "grid-cols-1",
			2: "grid-cols-2",
			3: "grid-cols-3",
			4: "grid-cols-4",
			5: "grid-cols-5",
			6: "grid-cols-6"
		}, t = Math.max(1, Math.min(6, b));
		return e[t] || "grid-cols-3";
	}, S = (e, t) => {
		e.preventDefault(), e.stopPropagation(), y(t);
	}, C = (e) => {
		e.preventDefault(), e.stopPropagation(), y(null);
	}, w = u(() => {
		v !== null && y((e) => Math.min(_.length - 1, e + 1));
	}, [v, _.length]), T = u(() => {
		v !== null && y((e) => Math.max(0, e - 1));
	}, [v]);
	return d(() => {
		if (v === null) return;
		let e = new AbortController(), t = e.signal, n = (e) => {
			e.key === "Escape" ? y(null) : e.key === "ArrowRight" ? w() : e.key === "ArrowLeft" && T(), e.stopPropagation();
		};
		return window.addEventListener("keydown", n, { signal: t }), () => {
			e.abort();
		};
	}, [
		v,
		w,
		T
	]), _.length === 0 ? /* @__PURE__ */ (0, p.jsx)(c, {
		brick: r,
		editable: m,
		manifest: t,
		className: n("flex flex-col grow items-center justify-center text-center", Object.values(g)),
		children: /* @__PURE__ */ (0, p.jsx)("div", {
			className: "p-8",
			children: m ? "Add images to this gallery in the panel" : "No images to display"
		})
	}) : /* @__PURE__ */ (0, p.jsxs)(c, {
		brick: r,
		editable: m,
		manifest: t,
		className: n(`grid auto-rows-fr @mobile:grid-cols-2 @desktop:${x()}`, Object.values(g)),
		children: [_.map(({ image: e }, t) => /* @__PURE__ */ (0, p.jsx)("div", {
			className: n("group relative transition-all justify-center items-center overflow-hidden rounded-lg shadow-md hover:scale-105 min-h-fit col-span-1"),
			children: /* @__PURE__ */ (0, p.jsx)("img", {
				src: e.src,
				alt: e.src,
				className: n("w-full h-full object-cover cursor-pointer"),
				onClick: (e) => S(e, t)
			})
		}, t)), v !== null && _[v] && /* @__PURE__ */ (0, p.jsx)("div", {
			className: n("fixed top-0 left-0 w-screen h-screen", "bg-black/80", "flex items-center justify-center", "z-[99999]"),
			onClick: (e) => {
				e.target === e.currentTarget && C(e), e.stopPropagation();
			},
			children: /* @__PURE__ */ (0, p.jsxs)("div", {
				className: n("relative group @mobile:w-[80dvw] @desktop:w-[60dvw] h-[60vh] overflow-y-hidden overflow-x-visible bg-black rounded-xl"),
				children: [
					/* @__PURE__ */ (0, p.jsx)("img", {
						src: _[v].image.src,
						alt: _[v].image.alt,
						className: "w-full h-full  object-contain"
					}),
					_[v].legend && /* @__PURE__ */ (0, p.jsx)("div", {
						className: "absolute left-0 right-0 bottom-0 bg-black/60 text-white text-sm p-2 translate-y-full group-hover:translate-y-0 transition-transform",
						children: _[v].legend
					}),
					/* @__PURE__ */ (0, p.jsx)("div", {
						className: "absolute top-2 right-2 w-10 h-10 flex items-center justify-center bg-black/60 text-white cursor-pointer rounded-full",
						children: /* @__PURE__ */ (0, p.jsx)(o, {
							className: "h-6 w-6",
							onClick: C,
							"aria-label": "Close image"
						})
					}),
					v > 0 && /* @__PURE__ */ (0, p.jsx)("button", {
						type: "button",
						onClick: T,
						className: n("absolute aspect-square h-14 left-2 top-1/2 -translate-y-1/2 bg-black/60 text-white/80", "rounded-full p-2 duration-200  opacity-0 group-hover:opacity-100 transition-opacity flex justify-center items-center"),
						"aria-label": "Previous image",
						children: /* @__PURE__ */ (0, p.jsx)(i, { className: "w-7 h-7" })
					}),
					v < _.length - 1 && /* @__PURE__ */ (0, p.jsx)("button", {
						type: "button",
						onClick: w,
						className: n("absolute aspect-square h-14 right-2 top-1/2 -translate-y-1/2 bg-black/60 text-white/80", "rounded-full p-2 duration-200  opacity-0 group-hover:opacity-100 transition-opacity flex justify-center items-center"),
						"aria-label": "Next image",
						children: /* @__PURE__ */ (0, p.jsx)(a, { className: "w-7 h-7" })
					})
				]
			})
		})]
	});
}
export { m as default };

//# sourceMappingURL=images-gallery.MlE_5A7U.js.map