import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { IconButton } from "../IconButton";
import { useTheme } from "../ThemeProvider";
export const GalleryModal = ({ images, selectedImageIndex, setSelectedImageIndex, onClose, }) => {
    const [scrollButtons, setScrollButtons] = useState({ showLeft: false, showRight: false });
    const carouselRef = useRef(null);
    const modalContentRef = useRef(null);
    const { portalThemeClassName } = useTheme();
    // Check if scrolling is needed
    const checkScroll = useCallback(() => {
        if (!carouselRef.current)
            return;
        const container = carouselRef.current;
        setScrollButtons({
            showLeft: container.scrollLeft > 0,
            showRight: container.scrollLeft + container.offsetWidth < container.scrollWidth,
        });
    }, []);
    useEffect(() => {
        if (!carouselRef.current) {
            return;
        }
        const container = carouselRef.current;
        // Initial check
        checkScroll();
        const resizeObserver = new ResizeObserver(checkScroll);
        resizeObserver.observe(container);
        container.addEventListener("scroll", checkScroll);
        return () => {
            container.removeEventListener("scroll", checkScroll);
            resizeObserver.disconnect();
        };
    }, [checkScroll]);
    // Handle modal lifecycle events (scroll lock, close on escape, close on outside click)
    useEffect(() => {
        // Disable body scroll
        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);
        // Cleanup
        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 containerRect = container.getBoundingClientRect();
            const scrollAmount = containerRect.width * 0.28;
            if (direction === "left") {
                container.scrollBy({
                    left: -scrollAmount,
                    behavior: "smooth",
                });
            }
            else {
                container.scrollBy({
                    left: scrollAmount,
                    behavior: "smooth",
                });
            }
        }
    };
    // Memoize thumbnail click handler
    const handleThumbnailClick = useCallback((index) => () => setSelectedImageIndex(index), [setSelectedImageIndex]);
    return createPortal(_jsx("div", { className: clsx("openui-gallery__modal", portalThemeClassName), children: _jsxs("div", { className: "openui-gallery__modal-content", ref: modalContentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": "openui-gallery-modal-heading", children: [_jsxs("div", { className: "openui-gallery__modal-header", children: [_jsx("span", { id: "openui-gallery-modal-heading", className: "openui-gallery__modal-heading", children: "All Photos" }), _jsx(IconButton, { size: "small", variant: "secondary", icon: _jsx(X, {}), onClick: onClose, "aria-label": "Close gallery" })] }), _jsx("div", { className: "openui-gallery__modal-main", children: _jsx("img", { src: images[selectedImageIndex]?.src, alt: images[selectedImageIndex]?.alt || `Gallery image ${selectedImageIndex + 1}` }) }), _jsxs("div", { className: "openui-gallery__modal-carousel-container", children: [scrollButtons.showLeft && (_jsx("div", { className: clsx("openui-gallery__modal-carousel-button-container", "openui-gallery__modal-carousel-button-container-left"), children: _jsx(IconButton, { className: clsx("openui-gallery__carousel-button", "openui-gallery__carousel-button--left"), onClick: () => scroll("left"), "aria-label": "Scroll images left", icon: _jsx(ChevronLeft, {}), variant: "secondary", size: "extra-small" }) })), _jsx("div", { className: "openui-gallery__modal-carousel", ref: carouselRef, children: images.map((image, index) => (_jsx("div", { className: clsx("openui-gallery__modal-thumbnail", index === selectedImageIndex && "openui-gallery__modal-thumbnail--active"), role: "button", tabIndex: 0, "aria-label": image.alt || `Gallery image ${index + 1}`, "aria-pressed": index === selectedImageIndex, onClick: handleThumbnailClick(index), onKeyDown: (e) => {
                                    if (e.key === "Enter" || e.key === " ") {
                                        e.preventDefault();
                                        handleThumbnailClick(index)();
                                    }
                                }, children: _jsx("img", { src: image.src, alt: "", "aria-hidden": "true" }) }, index))) }), scrollButtons.showRight && (_jsx("div", { className: clsx("openui-gallery__modal-carousel-button-container", "openui-gallery__modal-carousel-button-container-right"), children: _jsx(IconButton, { className: clsx("openui-gallery__carousel-button", "openui-gallery__carousel-button--right"), onClick: () => scroll("right"), "aria-label": "Scroll images right", icon: _jsx(ChevronRight, {}), variant: "secondary", size: "extra-small" }) }))] })] }) }), document.body);
};
//# sourceMappingURL=GalleryModal.js.map