import { jsxs as r, jsx as t } from "react/jsx-runtime";
import { af as N } from "./_commonjsHelpers.BCwc0xb5.js";
import "@sinclair/typebox";
import { _ as s } from "./twind.BLUk_ZzT.js";
import { forwardRef as w, useState as I } from "react";
import { b as j } from "./use-section-style.Cg6VYj5D.js";
import { useDatasource as k } from "../use-datasource.js";
const B = w(({ brick: i }, u) => {
  const { props: l } = i, n = j(i), { datasourceId: C, data: y, isSample: f } = k(l.datasource, N.datasource), c = l.staticImages || [], d = l.title, [o, m] = I(null), g = Number(l.columns) || 3, h = l.borderRadius || "rounded-md", p = () => {
    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"
    }, a = Math.max(1, Math.min(6, g));
    return e[a] || "grid-cols-3";
  }, x = (e, a) => {
    e.preventDefault(), e.stopPropagation(), m(a);
  }, v = (e) => {
    e.preventDefault(), e.stopPropagation(), m(null);
  };
  return /* @__PURE__ */ r("div", { children: [
    /* @__PURE__ */ t("div", { ref: u, className: s("flex flex-1"), children: /* @__PURE__ */ r("div", { className: "flex flex-col flex-1", children: [
      d && /* @__PURE__ */ t("div", { className: s("text-lg w-full text-center font-semibold", n.title), children: d }),
      /* @__PURE__ */ r(
        "div",
        {
          className: s("h-full", "overflow-visible", `grid ${p()}`, Object.values(n)),
          children: [
            l.editable && f && /* @__PURE__ */ t("div", { className: "absolute top-0 left-0 right-0 bottom-0 bg-white/30 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "text-white text-center rounded-md bg-black/30 p-4", children: [
              /* @__PURE__ */ t("div", { className: "text-2xl font-bold", children: "Images Wall" }),
              /* @__PURE__ */ t("div", { className: "text-base", children: "Drag and drop images here or edit content in the panel" })
            ] }) }),
            c.map((e, a) => /* @__PURE__ */ r("div", { className: s("grid relative justify-center items-center  hover:scale-105"), children: [
              /* @__PURE__ */ t(
                "img",
                {
                  src: e.src.src,
                  alt: e.src.alt,
                  className: s("w-full transition-all object-contain cursor-pointer", h),
                  onClick: (b) => x(b, a)
                }
              ),
              e.legend && /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 text-white text-sm p-2", children: e.legend })
            ] }, a))
          ]
        }
      )
    ] }) }),
    o !== null && c[o] && /* @__PURE__ */ t(
      "div",
      {
        className: s(
          "fixed top-0 left-0 w-screen h-screen",
          "bg-black/80",
          "flex items-center justify-center",
          "z-[9999]"
        ),
        onClick: (e) => {
          e.target === e.currentTarget && v(e);
        },
        children: /* @__PURE__ */ t(
          "div",
          {
            className: s("relative max-w-[50vw] max-h-[50vh]", "flex items-center justify-center"),
            onClick: (e) => e.stopPropagation(),
            children: /* @__PURE__ */ t(
              "img",
              {
                src: c[o].src.src,
                alt: c[o].src.alt,
                className: "max-w-full max-h-full object-contain"
              }
            )
          }
        )
      }
    )
  ] });
});
export {
  B as default
};
//# sourceMappingURL=images-gallery.ByioPdu8.js.map
