import { jsx as s, jsxs as h } from "react/jsx-runtime";
import { aj as b } from "./chunk-3RDGTRSB.DySNCMmQ.js";
import "@sinclair/typebox";
import { _ as o } from "./twind.D7be0E5m.js";
import { useState as C, useCallback as v, useEffect as j } from "react";
import { b as M } from "./use-section-style.CihCUEtb.js";
import { u as P } from "./use-color-preset.BrT8DcA1.js";
import { c as I, d as A, e as S } from "./index.xcLb1BJ4.js";
import { B as y } from "./BrickRoot.C1PanknS.js";
function z({ brick: i, editable: w }) {
  const { props: m } = i, f = M(i), p = P(i), r = (m.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [t, a] = C(null), x = Number(m.columns) || 3, k = () => {
    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"
    }, l = Math.max(1, Math.min(6, x));
    return e[l] || "grid-cols-3";
  }, N = (e, l) => {
    e.preventDefault(), e.stopPropagation(), a(l);
  }, g = (e) => {
    e.preventDefault(), e.stopPropagation(), a(null);
  }, c = v(() => {
    t !== null && a((e) => Math.min(r.length - 1, e + 1));
  }, [t, r.length]), u = v(() => {
    t !== null && a((e) => Math.max(0, e - 1));
  }, [t]);
  return j(() => {
    if (t === null) return;
    const e = new AbortController(), l = e.signal, d = (n) => {
      n.key === "Escape" ? a(null) : n.key === "ArrowRight" ? c() : n.key === "ArrowLeft" && u(), n.stopPropagation();
    };
    return window.addEventListener("keydown", d, { signal: l }), () => {
      e.abort();
    };
  }, [t, c, u]), r.length === 0 ? /* @__PURE__ */ s(
    y,
    {
      manifest: b,
      className: o(
        "flex flex-col grow items-center justify-center text-center",
        Object.values(f),
        p.main
      ),
      children: /* @__PURE__ */ s("div", { className: "p-8", children: w ? "Add images to this gallery in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ h(
    y,
    {
      manifest: b,
      className: o(
        `grid auto-rows-fr @mobile:grid-cols-2 @desktop:${k()}`,
        Object.values(f),
        p.main
      ),
      children: [
        r.map((e, l) => /* @__PURE__ */ s(
          "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__ */ s(
              "img",
              {
                src: e.src.src,
                alt: e.src.alt,
                className: o("w-full h-full object-cover cursor-pointer"),
                onClick: (d) => N(d, l)
              }
            )
          },
          l
        )),
        t !== null && r[t] && /* @__PURE__ */ s(
          "div",
          {
            className: o(
              "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 && g(e), e.stopPropagation();
            },
            children: /* @__PURE__ */ h(
              "div",
              {
                className: o(
                  "relative group @mobile:w-[80dvw] @desktop:w-[60dvw] h-[60vh] overflow-y-hidden overflow-x-visible bg-black rounded-xl"
                ),
                children: [
                  /* @__PURE__ */ s(
                    "img",
                    {
                      src: r[t].src.src,
                      alt: r[t].src.alt,
                      className: "w-full h-full  object-contain"
                    }
                  ),
                  r[t].legend && /* @__PURE__ */ s("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__ */ s("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__ */ s(I, { className: "h-6 w-6", onClick: g, "aria-label": "Close image" }) }),
                  t > 0 && /* @__PURE__ */ s(
                    "button",
                    {
                      type: "button",
                      onClick: u,
                      className: o(
                        "absolute aspect-square h-14 left-2 top-1/2 -translate-y-1/2 bg-black/60 text-white/80",
                        // "bg-primary-light hover:bg-primary text-primary-content-light",
                        "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__ */ s(A, { className: "w-7 h-7" })
                    }
                  ),
                  t < r.length - 1 && /* @__PURE__ */ s(
                    "button",
                    {
                      type: "button",
                      onClick: c,
                      className: o(
                        "absolute aspect-square h-14 right-2 top-1/2 -translate-y-1/2 bg-black/60 text-white/80",
                        // "bg-primary-light hover:bg-primary text-primary-content-light",
                        "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__ */ s(S, { className: "w-7 h-7" })
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
}
export {
  z as default
};
//# sourceMappingURL=images-gallery.DUWwgw76.js.map
