import { j as t } from "../../../../../_virtual/jsx-runtime.js";
import { a as x } from "../../../../sdk/dist/shared/chunk-NNI225RG.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-UU2MSQXY.js";
import "../../../../sdk/dist/shared/chunk-T3LIA4YB.js";
import "../../../../sdk/dist/shared/chunk-YBGPPF7T.js";
import "../../../../sdk/dist/shared/chunk-UMHXXXVP.js";
import "../../../../sdk/dist/shared/chunk-5N6MBJJ4.js";
import { tx as l } from "../../../../style-system/dist/twind.js";
import { useState as k, useCallback as b, useEffect as N } from "react";
import { useBrickStyle as C } from "../hooks/use-brick-style.js";
import { MdClose as P, MdChevronLeft as M, MdChevronRight as I } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/md/index.js";
import v from "../components/BrickRoot.js";
import { useBrickProps as A } from "../hooks/use-brick-props.js";
function H(p) {
  const { brick: n, editable: c } = p, f = A(p), g = C(n), r = (f.images || []).filter(
    ({ image: e }) => typeof e.src == "string" && e.src !== ""
  ), [s, a] = k(null), y = Number(f.columns) || 3, w = () => {
    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, y));
    return e[o] || "grid-cols-3";
  }, j = (e, o) => {
    e.preventDefault(), e.stopPropagation(), a(o);
  }, h = (e) => {
    e.preventDefault(), e.stopPropagation(), a(null);
  }, m = b(() => {
    s !== null && a((e) => Math.min(r.length - 1, e + 1));
  }, [s, r.length]), u = b(() => {
    s !== null && a((e) => Math.max(0, e - 1));
  }, [s]);
  return N(() => {
    if (s === null) return;
    const e = new AbortController(), o = e.signal, d = (i) => {
      i.key === "Escape" ? a(null) : i.key === "ArrowRight" ? m() : i.key === "ArrowLeft" && u(), i.stopPropagation();
    };
    return window.addEventListener("keydown", d, { signal: o }), () => {
      e.abort();
    };
  }, [s, m, u]), r.length === 0 ? /* @__PURE__ */ t.jsx(
    v,
    {
      brick: n,
      editable: c,
      manifest: x,
      className: l("flex flex-col grow items-center justify-center text-center", Object.values(g)),
      children: /* @__PURE__ */ t.jsx("div", { className: "p-8", children: c ? "Add images to this gallery in the panel" : "No images to display" })
    }
  ) : /* @__PURE__ */ t.jsxs(
    v,
    {
      brick: n,
      editable: c,
      manifest: x,
      className: l(
        `grid auto-rows-fr @mobile:grid-cols-2 @desktop:${w()}`,
        Object.values(g)
      ),
      children: [
        r.map(({ image: e }, o) => /* @__PURE__ */ t.jsx(
          "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__ */ t.jsx(
              "img",
              {
                src: e.src,
                alt: e.src,
                className: l("w-full h-full object-cover cursor-pointer"),
                onClick: (d) => j(d, o)
              }
            )
          },
          o
        )),
        s !== null && r[s] && /* @__PURE__ */ t.jsx(
          "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__ */ t.jsxs(
              "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__ */ t.jsx(
                    "img",
                    {
                      src: r[s].image.src,
                      alt: r[s].image.alt,
                      className: "w-full h-full  object-contain"
                    }
                  ),
                  r[s].legend && /* @__PURE__ */ t.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: r[s].legend }),
                  /* @__PURE__ */ t.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__ */ t.jsx(P, { className: "h-6 w-6", onClick: h, "aria-label": "Close image" }) }),
                  s > 0 && /* @__PURE__ */ t.jsx(
                    "button",
                    {
                      type: "button",
                      onClick: u,
                      className: l(
                        "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__ */ t.jsx(M, { className: "w-7 h-7" })
                    }
                  ),
                  s < r.length - 1 && /* @__PURE__ */ t.jsx(
                    "button",
                    {
                      type: "button",
                      onClick: m,
                      className: l(
                        "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__ */ t.jsx(I, { className: "w-7 h-7" })
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
}
export {
  H as default
};
//# sourceMappingURL=images-gallery.js.map
