import { jsx as s, jsxs as b } from "react/jsx-runtime";
import { _ as o } from "./twind.D7be0E5m.js";
import { forwardRef as N, useState as C, useCallback as v, useEffect as j } from "react";
import { b as M } from "./use-section-style.D7ZN4IXn.js";
import { u as P } from "./use-color-preset.B03-6uH7.js";
import { c as I, d as A, e as D } from "./index.DEeiGRYb.js";
const G = N(({ brick: i, editable: w }, m) => {
  const { props: f } = i, g = M(i), h = P(i), l = (f.images || []).filter(
    (e) => typeof e.src.src == "string" && e.src.src !== ""
  ), [t, a] = C(null), y = 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"
    }, r = Math.max(1, Math.min(6, y));
    return e[r] || "grid-cols-3";
  }, k = (e, r) => {
    e.preventDefault(), e.stopPropagation(), a(r);
  }, p = (e) => {
    e.preventDefault(), e.stopPropagation(), a(null);
  }, c = v(() => {
    t !== null && a((e) => Math.min(l.length - 1, e + 1));
  }, [t, l.length]), u = v(() => {
    t !== null && a((e) => Math.max(0, e - 1));
  }, [t]);
  return j(() => {
    if (t === null) return;
    const e = new AbortController(), r = 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: r }), () => {
      e.abort();
    };
  }, [t, c, u]), l.length === 0 ? /* @__PURE__ */ s(
    "div",
    {
      ref: m,
      className: o(
        "flex flex-col grow items-center justify-center min-w-fit text-center",
        Object.values(g),
        h.main
      ),
      children: /* @__PURE__ */ s("div", { className: "p-8", children: w ? "Add images to this gallery in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ b(
    "div",
    {
      ref: m,
      className: o(
        "grid grow shrink-0 min-h-fit max-w-full",
        `auto-rows-fr @mobile:grid-cols-2 @desktop:${x()}`,
        Object.values(g),
        h.main
      ),
      children: [
        l.map((e, r) => /* @__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) => k(d, r)
              }
            )
          },
          r
        )),
        t !== null && l[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 && p(e), e.stopPropagation();
            },
            children: /* @__PURE__ */ b(
              "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: l[t].src.src,
                      alt: l[t].src.alt,
                      className: "w-full h-full  object-contain"
                    }
                  ),
                  l[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: l[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: p, "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 < l.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(D, { className: "w-7 h-7" })
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
});
export {
  G as default
};
//# sourceMappingURL=images-gallery.Cph1S8FH.js.map
