import { jsx as l, jsxs as b } from "react/jsx-runtime";
import { aP as v } from "./use-page-data.BYLN5MSa.js";
import { a as o } from "./twind.Cg2g8xBZ.js";
import { useState as C, useCallback as y, useEffect as j } from "react";
import { b as P } from "./use-section-style.CqWLdjop.js";
import { b as M, c as I, d as A } from "./index.DpxLxIqU.js";
import { B as w } from "./BrickRoot.CQgjTuOI.js";
import { u as B } from "./use-brick-props.C-zGB4NN.js";
function O(g) {
  const { brick: n, editable: c } = g, f = B(g), p = P(n), r = (f.images || []).filter(
    ({ image: e }) => e && typeof e.src == "string" && e.src !== ""
  ), [t, a] = C(null), k = Number(f.columns) || 3, x = () => {
    const 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"
    }, s = Math.max(1, Math.min(6, k));
    return e[s] || "grid-cols-3";
  }, N = (e, s) => {
    e.preventDefault(), e.stopPropagation(), a(s);
  }, h = (e) => {
    e.preventDefault(), e.stopPropagation(), a(null);
  }, u = y(() => {
    t !== null && a((e) => Math.min(r.length - 1, e + 1));
  }, [t, r.length]), d = y(() => {
    t !== null && a((e) => Math.max(0, e - 1));
  }, [t]);
  return j(() => {
    if (t === null) return;
    const e = new AbortController(), s = e.signal, m = (i) => {
      i.key === "Escape" ? a(null) : i.key === "ArrowRight" ? u() : i.key === "ArrowLeft" && d(), i.stopPropagation();
    };
    return window.addEventListener("keydown", m, { signal: s }), () => {
      e.abort();
    };
  }, [t, u, d]), r.length === 0 ? /* @__PURE__ */ l(
    w,
    {
      brick: n,
      editable: c,
      manifest: v,
      className: o("flex flex-col grow items-center justify-center text-center", Object.values(p)),
      children: /* @__PURE__ */ l("div", { className: "p-8", children: c ? "Add images to this gallery in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ b(
    w,
    {
      brick: n,
      editable: c,
      manifest: v,
      className: o(
        `grid auto-rows-fr @mobile:grid-cols-2 @desktop:${x()}`,
        Object.values(p)
      ),
      children: [
        r.map(({ image: e }, s) => /* @__PURE__ */ l(
          "div",
          {
            className: o(
              "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__ */ l(
              "img",
              {
                src: e.src,
                alt: e.src,
                className: o("w-full h-full object-cover cursor-pointer"),
                onClick: (m) => N(m, s)
              }
            )
          },
          s
        )),
        t !== null && r[t] && /* @__PURE__ */ l(
          "div",
          {
            className: o(
              "fixed top-0 left-0 w-dvw h-dvh",
              "bg-black/70",
              "flex items-center justify-center",
              "z-[99999]"
            ),
            onClick: (e) => {
              e.target === e.currentTarget && h(e), e.stopPropagation();
            },
            children: /* @__PURE__ */ b(
              "div",
              {
                className: o("relative group @mobile:w-[80dvw] @desktop:w-[60dvw] h-[60vh] bg-black rounded-xl"),
                children: [
                  /* @__PURE__ */ l(
                    "img",
                    {
                      src: r[t].image.src,
                      alt: r[t].image.alt,
                      className: "w-full h-full object-contain"
                    }
                  ),
                  r[t].legend && /* @__PURE__ */ l("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: r[t].legend }),
                  /* @__PURE__ */ l("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__ */ l(M, { className: "h-6 w-6", onClick: h, "aria-label": "Close image" }) }),
                  t > 0 && /* @__PURE__ */ l(
                    "button",
                    {
                      type: "button",
                      onClick: d,
                      className: o(
                        "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__ */ l(I, { className: "w-7 h-7" })
                    }
                  ),
                  t < r.length - 1 && /* @__PURE__ */ l(
                    "button",
                    {
                      type: "button",
                      onClick: u,
                      className: o(
                        "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__ */ l(A, { className: "w-7 h-7" })
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
}
export {
  O as default
};
