Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-CKQMccvm.cjs");
const require_components_IconButton_index = require("../IconButton/index.cjs");
const require_ThemeProvider = require("../../ThemeProvider-0ytg6ico.cjs");
const require_components_Button_index = require("../Button/index.cjs");
let clsx = require("clsx");
clsx = require_chunk.__toESM(clsx);
let lucide_react = require("lucide-react");
let react = require("react");
react = require_chunk.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let react_dom = require("react-dom");
//#region src/components/ImageGallery/GalleryModal.tsx
const GalleryModal = ({ images, selectedImageIndex, setSelectedImageIndex, onClose }) => {
	const [scrollButtons, setScrollButtons] = (0, react.useState)({
		showLeft: false,
		showRight: false
	});
	const carouselRef = (0, react.useRef)(null);
	const modalContentRef = (0, react.useRef)(null);
	const { portalThemeClassName } = require_ThemeProvider.useTheme();
	const checkScroll = (0, react.useCallback)(() => {
		if (!carouselRef.current) return;
		const container = carouselRef.current;
		setScrollButtons({
			showLeft: container.scrollLeft > 0,
			showRight: container.scrollLeft + container.offsetWidth < container.scrollWidth
		});
	}, []);
	(0, react.useEffect)(() => {
		if (!carouselRef.current) return;
		const container = carouselRef.current;
		checkScroll();
		const resizeObserver = new ResizeObserver(checkScroll);
		resizeObserver.observe(container);
		container.addEventListener("scroll", checkScroll);
		return () => {
			container.removeEventListener("scroll", checkScroll);
			resizeObserver.disconnect();
		};
	}, [checkScroll]);
	(0, react.useEffect)(() => {
		document.body.style.overflow = "hidden";
		const handleKeyDown = (e) => {
			if (e.key === "Escape") onClose();
		};
		const handleOutsideClick = (e) => {
			if (modalContentRef.current && !modalContentRef.current.contains(e.target)) onClose();
		};
		document.addEventListener("keydown", handleKeyDown);
		document.addEventListener("mousedown", handleOutsideClick);
		return () => {
			document.body.style.overflow = "auto";
			document.removeEventListener("keydown", handleKeyDown);
			document.removeEventListener("mousedown", handleOutsideClick);
		};
	}, [onClose]);
	const scroll = (direction) => {
		if (carouselRef.current) {
			const container = carouselRef.current;
			const scrollAmount = container.getBoundingClientRect().width * .28;
			if (direction === "left") container.scrollBy({
				left: -scrollAmount,
				behavior: "smooth"
			});
			else container.scrollBy({
				left: scrollAmount,
				behavior: "smooth"
			});
		}
	};
	const handleThumbnailClick = (0, react.useCallback)((index) => () => setSelectedImageIndex(index), [setSelectedImageIndex]);
	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
		className: (0, clsx.default)("openui-gallery__modal", portalThemeClassName),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "openui-gallery__modal-content",
			ref: modalContentRef,
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "openui-gallery__modal-header",
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
						className: "openui-gallery__modal-heading",
						children: "All Photos"
					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconButton_index.IconButton, {
						size: "small",
						variant: "secondary",
						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {}),
						onClick: onClose
					})]
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
					className: "openui-gallery__modal-main",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
						src: images[selectedImageIndex]?.src,
						alt: images[selectedImageIndex]?.alt || `Gallery image ${selectedImageIndex + 1}`
					})
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					className: "openui-gallery__modal-carousel-container",
					children: [
						scrollButtons.showLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: (0, clsx.default)("openui-gallery__modal-carousel-button-container", "openui-gallery__modal-carousel-button-container-left"),
							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconButton_index.IconButton, {
								className: (0, clsx.default)("openui-gallery__carousel-button", "openui-gallery__carousel-button--left"),
								onClick: () => scroll("left"),
								"aria-label": "Scroll images left",
								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {}),
								variant: "secondary",
								size: "extra-small"
							})
						}),
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: "openui-gallery__modal-carousel",
							ref: carouselRef,
							children: images.map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
								className: (0, clsx.default)("openui-gallery__modal-thumbnail", index === selectedImageIndex && "openui-gallery__modal-thumbnail--active"),
								onClick: handleThumbnailClick(index),
								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
									src: image.src,
									alt: image.alt || `Gallery thumbnail ${index + 1}`
								})
							}, index))
						}),
						scrollButtons.showRight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
							className: (0, clsx.default)("openui-gallery__modal-carousel-button-container", "openui-gallery__modal-carousel-button-container-right"),
							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconButton_index.IconButton, {
								className: (0, clsx.default)("openui-gallery__carousel-button", "openui-gallery__carousel-button--right"),
								onClick: () => scroll("right"),
								"aria-label": "Scroll images right",
								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {}),
								variant: "secondary",
								size: "extra-small"
							})
						})
					]
				})
			]
		})
	}), document.body);
};
//#endregion
//#region src/components/ImageGallery/ImageGallery.tsx
const MAX_GRID_IMAGES = 5;
const getLayoutClassName = (imageCount) => {
	switch (imageCount) {
		case 1: return "openui-gallery--single";
		case 2: return "openui-gallery--double";
		case 3: return "openui-gallery--triple";
		case 4: return "openui-gallery--quad";
		default: return "openui-gallery--default";
	}
};
const ImageGallery = ({ images }) => {
	const [showAll, setShowAll] = (0, react.useState)(false);
	const [selectedImageIndex, setSelectedImageIndex] = (0, react.useState)(0);
	const layoutClass = (0, react.useMemo)(() => getLayoutClassName(images.length), [images.length]);
	const shouldShowButton = (0, react.useMemo)(() => images.length > MAX_GRID_IMAGES, [images.length]);
	const visibleImages = (0, react.useMemo)(() => images.slice(0, MAX_GRID_IMAGES), [images]);
	const toggleShowAll = (0, react.useCallback)(() => {
		setShowAll((prev) => !prev);
	}, []);
	const handleImageClick = (0, react.useCallback)((index) => {
		setSelectedImageIndex(index);
		setShowAll(true);
	}, []);
	const setSelectedImageIndexMemoized = (0, react.useCallback)((index) => {
		setSelectedImageIndex(index);
	}, []);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: (0, clsx.default)("openui-gallery", layoutClass),
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "openui-gallery__grid",
			children: [visibleImages.map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: (0, clsx.default)("openui-gallery__image", index === 0 && "openui-gallery__image--main"),
				onClick: () => handleImageClick(index),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
					src: image.src,
					alt: image.alt || `Gallery image ${index + 1}`
				})
			}, index)), shouldShowButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				className: "openui-gallery__show-all-button",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Button_index.Button, {
					variant: "primary",
					size: "small",
					onClick: toggleShowAll,
					children: "Show All"
				})
			})]
		}), showAll && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GalleryModal, {
			images,
			selectedImageIndex,
			setSelectedImageIndex: setSelectedImageIndexMemoized,
			onClose: toggleShowAll
		})]
	});
};
//#endregion
exports.GalleryModal = GalleryModal;
exports.ImageGallery = ImageGallery;

//# sourceMappingURL=index.cjs.map