"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import useEmblaCarousel from "embla-carousel-react";
import { cn } from "../utils/css";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "../button/button";
const CarouselContext = /*#__PURE__*/ React.createContext(null);
export function useCarousel() {
    const context = React.useContext(CarouselContext);
    if (!context) {
        throw new Error("useCarousel must be used within a <Carousel />");
    }
    return context;
}
const Carousel = /*#__PURE__*/ React.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref)=>{
    const [carouselRef, api] = useEmblaCarousel({
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y"
    }, plugins);
    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
    const [canScrollNext, setCanScrollNext] = React.useState(false);
    const [selectedIndex, setSelectedIndex] = React.useState(props.initIndex || 0);
    const [scrollSnaps, setScrollSnaps] = React.useState([]);
    const onSelect = React.useCallback((api)=>{
        if (!api) {
            return;
        }
        // console.log("selected", api.scrollSnapList());
        if (scrollSnaps.length === 0) {
            setScrollSnaps(api.scrollSnapList());
        }
        setSelectedIndex(api.selectedScrollSnap());
        setCanScrollPrev(api.canScrollPrev());
        setCanScrollNext(api.canScrollNext());
    }, [
        scrollSnaps
    ]);
    const scrollPrev = React.useCallback(()=>{
        api?.scrollPrev();
    }, [
        api
    ]);
    const scrollNext = React.useCallback(()=>{
        api?.scrollNext();
    }, [
        api
    ]);
    const handleKeyDown = React.useCallback((event)=>{
        if (event.key === "ArrowLeft") {
            event.preventDefault();
            scrollPrev();
        } else if (event.key === "ArrowRight") {
            event.preventDefault();
            scrollNext();
        }
    }, [
        scrollPrev,
        scrollNext
    ]);
    React.useEffect(()=>{
        if (!api || !setApi) {
            return;
        }
        setApi(api);
    }, [
        api,
        setApi
    ]);
    React.useEffect(()=>{
        if (!api) {
            return;
        }
        onSelect(api);
        api.on("reInit", onSelect);
        api.on("select", onSelect);
        if (props.initIndex) {
            api.scrollTo(props.initIndex);
        }
        return ()=>{
            api?.off("select", onSelect);
        };
    }, [
        api,
        onSelect
    ]);
    return /*#__PURE__*/ _jsx(CarouselContext.Provider, {
        value: {
            carouselRef,
            api: api,
            opts,
            orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
            scrollPrev,
            scrollNext,
            canScrollPrev,
            canScrollNext,
            selectedIndex,
            scrollSnaps
        },
        children: /*#__PURE__*/ _jsx("div", {
            ref: ref,
            onKeyDownCapture: handleKeyDown,
            className: cn("orderly-relative", className),
            role: "region",
            "aria-roledescription": "carousel",
            ...props,
            children: children
        })
    });
});
Carousel.displayName = "Carousel";
const CarouselContent = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
    const { carouselRef, orientation } = useCarousel();
    return /*#__PURE__*/ _jsx("div", {
        ref: carouselRef,
        className: "orderly-overflow-hidden",
        children: /*#__PURE__*/ _jsx("div", {
            ref: ref,
            className: cn("orderly-flex", orientation === "horizontal" ? "orderly--ml-4" : "orderly--mt-4 orderly-flex-col", className),
            ...props
        })
    });
});
CarouselContent.displayName = "CarouselContent";
const CarouselItem = /*#__PURE__*/ React.forwardRef(({ className, ...props }, ref)=>{
    const { orientation } = useCarousel();
    return /*#__PURE__*/ _jsx("div", {
        ref: ref,
        role: "group",
        "aria-roledescription": "slide",
        className: cn("orderly-min-w-0 orderly-shrink-0 orderly-grow-0 orderly-basis-full", orientation === "horizontal" ? "orderly-pl-4" : "orderly-pt-4", className),
        ...props
    });
});
CarouselItem.displayName = "CarouselItem";
const CarouselPrevious = /*#__PURE__*/ React.forwardRef(({ className, variant = "contained", size = "icon", ...props }, ref)=>{
    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
    return /*#__PURE__*/ _jsxs(Button, {
        // @ts-ignore
        ref: ref,
        variant: variant,
        size: size,
        className: cn("orderly-absolute  orderly-h-8 orderly-w-8 orderly-rounded-full", orientation === "horizontal" ? "orderly--left-12 orderly-top-1/2 orderly--translate-y-1/2" : "orderly--top-12 orderly-left-1/2 orderly--translate-x-1/2 orderly-rotate-90", className),
        disabled: !canScrollPrev,
        onClick: scrollPrev,
        ...props,
        children: [
            /*#__PURE__*/ _jsx(ChevronLeft, {
                size: 20
            }),
            /*#__PURE__*/ _jsx("span", {
                className: "orderly-sr-only",
                children: "Previous slide"
            })
        ]
    });
});
CarouselPrevious.displayName = "CarouselPrevious";
const CarouselNext = /*#__PURE__*/ React.forwardRef(({ className, variant = "contained", size = "icon", ...props }, ref)=>{
    const { orientation, scrollNext, canScrollNext } = useCarousel();
    return /*#__PURE__*/ _jsxs(Button, {
        // @ts-ignore
        ref: ref,
        variant: variant,
        size: size,
        className: cn("orderly-absolute orderly-h-8 orderly-w-8 orderly-rounded-full", orientation === "horizontal" ? "orderly--right-12 orderly-top-1/2 orderly--translate-y-1/2" : "orderly--bottom-12 orderly-left-1/2 orderly--translate-x-1/2 orderly-rotate-90", className),
        disabled: !canScrollNext,
        onClick: scrollNext,
        ...props,
        children: [
            /*#__PURE__*/ _jsx(ChevronRight, {
                size: 20
            }),
            /*#__PURE__*/ _jsx("span", {
                className: "orderly-sr-only",
                children: "Next slide"
            })
        ]
    });
});
CarouselNext.displayName = "CarouselNext";
const CarouselIdentifier = (props)=>{
    const { scrollSnaps, selectedIndex } = useCarousel();
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-flex orderly-gap-1", props.className),
        children: scrollSnaps.map((_, index)=>{
            return /*#__PURE__*/ _jsx(Dot, {
                index: index,
                active: index === selectedIndex,
                onClick: props.onClick,
                className: props.dotClassName,
                activeClassName: props.dotActiveClassName
            }, index);
        })
    });
};
CarouselIdentifier.displayName = "CarouselIdentifier";
export const Dot = ({ index, active, onClick, className, activeClassName })=>{
    const activedClassName = activeClassName || "orderly-bg-primary";
    return /*#__PURE__*/ _jsx("button", {
        onClick: ()=>onClick?.(index),
        className: cn("orderly-w-2 orderly-h-2 orderly-rounded-full orderly-bg-white/30", className, active && `active ${activedClassName}`)
    });
};
export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselIdentifier };

//# sourceMappingURL=carousel.js.map