import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import useEmblaCarousel from "embla-carousel-react";
import { useCallback, useEffect } from "react";
import { NextButton, PrevButton } from "./buttons";
import { cn } from "../../../utils";
export const CarouselBackgroundImage = (props)=>{
    const { backgroundImages, selectedSnap, setSelectedSnap } = props;
    const [emblaRef, emblaApi] = useEmblaCarousel({
        // loop: true,
        containScroll: "keepSnaps",
        dragFree: true
    });
    const onPrevButtonClick = useCallback(()=>{
        if (!emblaApi) return;
        emblaApi.scrollPrev();
    }, [
        emblaApi
    ]);
    const onNextButtonClick = useCallback(()=>{
        if (!emblaApi) return;
        emblaApi.scrollNext();
    }, [
        emblaApi
    ]);
    const onSelect = useCallback((emblaApi)=>{
        // setPrevBtnDisabled(!emblaApi.canScrollPrev());
        // setNextBtnDisabled(!emblaApi.canScrollNext());
        setSelectedSnap(emblaApi.selectedScrollSnap());
    }, []);
    useEffect(()=>{
        if (!emblaApi) return;
        onSelect(emblaApi);
        emblaApi.on("reInit", onSelect);
        emblaApi.on("select", onSelect);
        emblaApi?.scrollTo(selectedSnap);
    }, [
        emblaApi,
        onSelect
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-flex orderly-px-[10px] orderly-mt-5",
        children: [
            /*#__PURE__*/ _jsx(PrevButton, {
                onClick: onPrevButtonClick
            }),
            /*#__PURE__*/ _jsx("div", {
                ref: emblaRef,
                className: "orderly-w-[552px] orderly-overflow orderly-overflow-x-auto orderly-scrollbar-hidden orderly-hide-scrollbar orderly-mx-2",
                children: /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex",
                    children: backgroundImages.map((e, index)=>/*#__PURE__*/ _jsx("div", {
                            onClick: ()=>{
                                ;
                                emblaApi?.scrollTo(index);
                            },
                            className: cn("orderly-shrink-0 orderly-mx-2 orderly-w-[162px] orderly-my-1 orderly-mr-[21px] orderly-rounded-sm", selectedSnap === index && "orderly-outline orderly-outline-1 orderly-outline-primary"),
                            children: /*#__PURE__*/ _jsx("img", {
                                src: e,
                                className: "orderly-rounded-sm"
                            })
                        }, e))
                })
            }),
            /*#__PURE__*/ _jsx(NextButton, {
                onClick: onNextButtonClick
            })
        ]
    });
};

//# sourceMappingURL=carousel.js.map