"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "CarouselBackgroundImage", {
    enumerable: true,
    get: function() {
        return CarouselBackgroundImage;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _emblacarouselreact = /*#__PURE__*/ _interop_require_default(require("embla-carousel-react"));
const _react = require("react");
const _buttons = require("./buttons");
const _utils = require("../../../utils");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const CarouselBackgroundImage = (props)=>{
    const { backgroundImages, selectedSnap, setSelectedSnap } = props;
    const [emblaRef, emblaApi] = (0, _emblacarouselreact.default)({
        // loop: true,
        containScroll: "keepSnaps",
        dragFree: true
    });
    const onPrevButtonClick = (0, _react.useCallback)(()=>{
        if (!emblaApi) return;
        emblaApi.scrollPrev();
    }, [
        emblaApi
    ]);
    const onNextButtonClick = (0, _react.useCallback)(()=>{
        if (!emblaApi) return;
        emblaApi.scrollNext();
    }, [
        emblaApi
    ]);
    const onSelect = (0, _react.useCallback)((emblaApi)=>{
        // setPrevBtnDisabled(!emblaApi.canScrollPrev());
        // setNextBtnDisabled(!emblaApi.canScrollNext());
        setSelectedSnap(emblaApi.selectedScrollSnap());
    }, []);
    (0, _react.useEffect)(()=>{
        if (!emblaApi) return;
        onSelect(emblaApi);
        emblaApi.on("reInit", onSelect);
        emblaApi.on("select", onSelect);
        emblaApi?.scrollTo(selectedSnap);
    }, [
        emblaApi,
        onSelect
    ]);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-flex orderly-px-[10px] orderly-mt-5",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_buttons.PrevButton, {
                onClick: onPrevButtonClick
            }),
            /*#__PURE__*/ (0, _jsxruntime.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__*/ (0, _jsxruntime.jsx)("div", {
                    className: "orderly-flex",
                    children: backgroundImages.map((e, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                            onClick: ()=>{
                                ;
                                emblaApi?.scrollTo(index);
                            },
                            className: (0, _utils.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__*/ (0, _jsxruntime.jsx)("img", {
                                src: e,
                                className: "orderly-rounded-sm"
                            })
                        }, e))
                })
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_buttons.NextButton, {
                onClick: onNextButtonClick
            })
        ]
    });
};

//# sourceMappingURL=carousel.js.map