import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { bb as manifest } from "./use-editor.CurXdZnZ.js";
import "@sinclair/typebox";
import "lodash-es";
import { a as tx } from "./twind.B1qQmF_s.js";
import { useState, useCallback, useEffect } from "react";
import { b as useBrickStyle } from "./use-section-style.D8_SY6rK.js";
import { b as MdClose, c as MdChevronLeft, d as MdChevronRight } from "./index.C4ysnl8v.js";
import { B as BrickRoot } from "./BrickRoot.C4Jpjw20.js";
import { u as useBrickProps } from "./use-brick-props.BKk39X7D.js";
function ImagesGallery(props_) {
  const { brick, editable } = props_;
  const brickProps = useBrickProps(props_);
  const styles = useBrickStyle(brick);
  const images = (brickProps.images || []).filter(
    ({ image }) => image && typeof image.src === "string" && image.src !== ""
  );
  const [selectedImageIndex, setSelectedImageIndex] = useState(null);
  const columns = Number(brickProps.columns) || 3;
  const getGridClasses = () => {
    const colsMap = {
      1: "grid-cols-1",
      2: "grid-cols-2",
      3: "grid-cols-3",
      4: "grid-cols-4",
      5: "grid-cols-5",
      6: "grid-cols-6"
    };
    const safeColumns = Math.max(1, Math.min(6, columns));
    return colsMap[safeColumns] || "grid-cols-3";
  };
  const handleImageClick = (e, index) => {
    e.preventDefault();
    e.stopPropagation();
    setSelectedImageIndex(index);
  };
  const handleClosePopover = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setSelectedImageIndex(null);
  };
  const goToNext = useCallback(() => {
    if (selectedImageIndex === null) return;
    setSelectedImageIndex((prevIndex) => Math.min(images.length - 1, prevIndex + 1));
  }, [selectedImageIndex, images.length]);
  const goToPrevious = useCallback(() => {
    if (selectedImageIndex === null) return;
    setSelectedImageIndex((prevIndex) => Math.max(0, prevIndex - 1));
  }, [selectedImageIndex]);
  useEffect(() => {
    if (selectedImageIndex === null) return;
    const ctrl = new AbortController();
    const signal = ctrl.signal;
    const handleKeyDown = (e) => {
      if (e.key === "Escape") {
        setSelectedImageIndex(null);
      } else if (e.key === "ArrowRight") {
        goToNext();
      } else if (e.key === "ArrowLeft") {
        goToPrevious();
      }
      e.stopPropagation();
    };
    window.addEventListener("keydown", handleKeyDown, { signal });
    return () => {
      ctrl.abort();
    };
  }, [selectedImageIndex, goToNext, goToPrevious]);
  if (images.length === 0) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(
      BrickRoot,
      {
        brick,
        editable,
        manifest,
        className: tx("flex flex-col grow items-center justify-center text-center", Object.values(styles)),
        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-8", children: editable ? "Add images to this gallery in the panel" : "No images to display" })
      }
    );
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      className: tx(
        `grid auto-rows-fr @mobile:grid-cols-2 @desktop:${getGridClasses()}`,
        Object.values(styles)
      ),
      children: [
        images.map(({ image }, index) => {
          return /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              className: tx(
                "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__ */ jsxRuntimeExports.jsx(
                "img",
                {
                  src: image.src,
                  alt: image.src,
                  className: tx(`w-full h-full object-cover cursor-pointer`),
                  onClick: (e) => handleImageClick(e, index)
                }
              )
            },
            index
          );
        }),
        selectedImageIndex !== null && images[selectedImageIndex] && /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: tx(
              "fixed top-0 left-0 w-dvw h-dvh",
              "bg-black/70",
              "flex items-center justify-center",
              "z-[99999]"
            ),
            onClick: (e) => {
              if (e.target === e.currentTarget) {
                handleClosePopover(e);
              }
              e.stopPropagation();
            },
            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "div",
              {
                className: tx("relative group @mobile:w-[80dvw] @desktop:w-[60dvw] h-[60vh] bg-black rounded-xl"),
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx(
                    "img",
                    {
                      src: images[selectedImageIndex].image.src,
                      alt: images[selectedImageIndex].image.alt,
                      className: "w-full h-full object-contain"
                    }
                  ),
                  images[selectedImageIndex].legend && /* @__PURE__ */ jsxRuntimeExports.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: images[selectedImageIndex].legend }),
                  /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(MdClose, { className: "h-6 w-6", onClick: handleClosePopover, "aria-label": "Close image" }) }),
                  selectedImageIndex > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                    "button",
                    {
                      type: "button",
                      onClick: goToPrevious,
                      className: tx(
                        "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__ */ jsxRuntimeExports.jsx(MdChevronLeft, { className: "w-7 h-7" })
                    }
                  ),
                  selectedImageIndex < images.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                    "button",
                    {
                      type: "button",
                      onClick: goToNext,
                      className: tx(
                        "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__ */ jsxRuntimeExports.jsx(MdChevronRight, { className: "w-7 h-7" })
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  );
}
export {
  ImagesGallery as default
};
//# sourceMappingURL=images-gallery.bKl1us3d.js.map
