import { jsx as s, jsxs as b } from "react/jsx-runtime";
import { U as v } from "./chunk-RXIM6GTA.C-ABNABt.js";
import "@sinclair/typebox";
import { _ as l } from "./twind.D_WBdNpx.js";
import { useState as C, useCallback as y, useEffect as j } from "react";
import { b as M } from "./use-section-style.CgktT_qE.js";
import { u as P } from "./use-color-preset.CYlEPd2C.js";
import { c as I, d as A, e as B } from "./index.DrgDWugK.js";
import { B as w } from "./BrickRoot.LoA8SzjD.js";
function z({ brick: i, editable: c }) {
  const { props: f } = i, p = M(i), g = P(i), r = (f.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [t, a] = C(null), x = Number(f.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"
    }, o = Math.max(1, Math.min(6, x));
    return e[o] || "grid-cols-3";
  }, N = (e, o) => {
    e.preventDefault(), e.stopPropagation(), a(o);
  }, h = (e) => {
    e.preventDefault(), e.stopPropagation(), a(null);
  }, u = y(() => {
    t !== null && a((e) => Math.min(r.length - 1, e + 1));
  }, [t, r.length]), m = y(() => {
    t !== null && a((e) => Math.max(0, e - 1));
  }, [t]);
  return j(() => {
    if (t === null) return;
    const e = new AbortController(), o = e.signal, d = (n) => {
      n.key === "Escape" ? a(null) : n.key === "ArrowRight" ? u() : n.key === "ArrowLeft" && m(), n.stopPropagation();
    };
    return window.addEventListener("keydown", d, { signal: o }), () => {
      e.abort();
    };
  }, [t, u, m]), r.length === 0 ? /* @__PURE__ */ s(
    w,
    {
      editable: c,
      manifest: v,
      className: l(
        "flex flex-col grow items-center justify-center text-center",
        Object.values(p),
        g.main
      ),
      children: /* @__PURE__ */ s("div", { className: "p-8", children: c ? "Add images to this gallery in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ b(
    w,
    {
      editable: c,
      manifest: v,
      className: l(
        `grid auto-rows-fr @mobile:grid-cols-2 @desktop:${k()}`,
        Object.values(p),
        g.main
      ),
      children: [
        r.map((e, o) => /* @__PURE__ */ s(
          "div",
          {
            className: l(
              "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: l("w-full h-full object-cover cursor-pointer"),
                onClick: (d) => N(d, o)
              }
            )
          },
          o
        )),
        t !== null && r[t] && /* @__PURE__ */ s(
          "div",
          {
            className: l(
              "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 && h(e), e.stopPropagation();
            },
            children: /* @__PURE__ */ b(
              "div",
              {
                className: l(
                  "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: h, "aria-label": "Close image" }) }),
                  t > 0 && /* @__PURE__ */ s(
                    "button",
                    {
                      type: "button",
                      onClick: m,
                      className: l(
                        "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: u,
                      className: l(
                        "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(B, { className: "w-7 h-7" })
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
}
export {
  z as default
};
//# sourceMappingURL=images-gallery.Davhze1F.js.map
