import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useWindowSize } from '@websolutespa/bom-mixer-hooks';
import { clamp } from '@websolutespa/bom-mixer-llm';
import { GalleryCard } from '../GalleryCard/gallery-card';
import style from './gallery-card-group.module.scss';
export const GalleryCardGroup = (props)=>{
    const { item } = props;
    const ref = useRef(null);
    const paginationContainerRef = useRef(null);
    const [currentSlide, setCurrentSlide] = useState(1);
    const [fractionWidth, setFractionWidth] = useState('auto');
    const [fractionLeft, setFractionLeft] = useState('0px');
    useWindowSize();
    const swiperProps = {
        modules: [
            Navigation,
            Pagination
        ],
        slidesPerView: 1,
        spaceBetween: clamp(20, 80),
        centeredSlides: true,
        speed: 1000,
        grabCursor: true,
        pagination: {
            clickable: true,
            el: ref.current
        },
        onSlideChange: (swiper)=>setCurrentSlide(swiper.activeIndex + 1)
    };
    useEffect(()=>{
        if (paginationContainerRef.current && item.items.length > 0) {
            const containerWidth = paginationContainerRef.current.offsetWidth;
            const calculatedWidth = containerWidth / item.items.length;
            setFractionWidth(`${calculatedWidth}px`);
            setFractionLeft(`${calculatedWidth * (currentSlide - 1)}px`);
        }
    }, [
        item.items,
        currentSlide
    ]);
    return /*#__PURE__*/ _jsx("div", {
        className: style.galleryCardGroup,
        children: /*#__PURE__*/ _jsx("div", {
            className: "llm__row",
            children: /*#__PURE__*/ _jsxs("div", {
                className: "llm__col --end-sm-10 --sm-8",
                children: [
                    /*#__PURE__*/ _jsx(Swiper, {
                        ...swiperProps,
                        children: item.items.map((item, i)=>/*#__PURE__*/ _jsx(SwiperSlide, {
                                className: style.galleryCardGroupSlide,
                                children: /*#__PURE__*/ _jsx(GalleryCard, {
                                    ...props,
                                    item: item
                                })
                            }, i))
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: style.paginationWrapper,
                        children: /*#__PURE__*/ _jsxs("div", {
                            ref: paginationContainerRef,
                            className: style.paginationContainer,
                            children: [
                                /*#__PURE__*/ _jsxs("div", {
                                    className: style.paginationFraction,
                                    style: {
                                        width: fractionWidth,
                                        left: fractionLeft,
                                        position: 'absolute'
                                    },
                                    children: [
                                        /*#__PURE__*/ _jsx("strong", {
                                            children: currentSlide.toString().padStart(2, '0')
                                        }),
                                        " of ",
                                        /*#__PURE__*/ _jsx("strong", {
                                            children: item.items.length.toString().padStart(2, '0')
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ _jsx("div", {
                                    className: style.paginationLine
                                })
                            ]
                        })
                    })
                ]
            })
        })
    });
};

//# sourceMappingURL=gallery-card-group.js.map