"use client";
import { useCallback, useEffect, useState } from "react";
import { useToggle } from "../useToggle.js";
import { loop } from "../utils/loop.js";
/**
 * @example
 * Accessible Carousel Example
 * ```tsx
 * import { Button, SlideContainer, Slide, useCarousel } from "@react-md/core";
 * import ChevronLeftIcon from "@react-md/material-icons/ChevronLeftIcon";
 * import ChevronRightIcon from "@react-md/material-icons/ChevronRightIcon";
 * import PauseIcon from "@react-md/material-icons/PauseIcon";
 * import PlayArrowIcon from "@react-md/material-icons/PlayArrowIcon";
 * import type { ReactElement } from "react";
 *
 * const slides = [
 *   { title: "Slide 1" },
 *   { title: "Slide 2" },
 *   { title: "Slide 3" },
 * ] as const;
 *
 * function Example(): ReactElement {
 *   const {
 *     paused,
 *     direction,
 *     activeIndex,
 *     togglePaused,
 *     setActiveIndex,
 *     increment,
 *     decrement,
 *   } = useCarousel({
 *     duration: 5000,
 *     totalSlides: slides.length,
 *   });
 *
 *   const slideId = useId();
 *
 *   return (
 *     <div
 *       aria-roledescription="carousel"
 *       aria-label="Carousel"
 *       id={useId()}
 *       role="region"
 *     >
 *       <SlideContainer aria-live="off" direction={direction}>
 *         {slides.map(({ title }, index) => (
 *           <Slide
 *             key={title}
 *             aria-label={`Slide ${index + 1} of ${slides.length - 1}`}
 *             aria-roledescription="slide"
 *             id={`${slideId}-${index}`}
 *             role="group"
 *             active={activeIndex === index}
 *           >
 *             {title}
 *           </Slide>
 *         ))}
 *       </SlideContainer>
 *       <Button
 *         aria-label="Pause"
 *         aria-pressed={paused}
 *         button="icon"
 *         onClick={togglePaused}
 *       >
 *         {paused ? <PlayArrowIcon /> : <PauseIcon />}
 *       </Button>
 *       {slides.map(({ title }, index) => (
 *         <Button
 *           key={title}
 *           aria-label={`Slide ${index + 1}`}
 *           aria-selected={activeIndex === index}
 *           aria-controls={`${slideId}-${index}`}
 *           role="tab"
 *           onClick={() => setActiveIndex(index))}
 *         />
 *       ))}
 *       <Button
 *         aria-label="Previous Slide"
 *         onClick={decrement}
 *         disabled={activeIndex === 0}
 *         buttonType="icon"
 *       >
 *         <ChevronLeftIcon />
 *       </Button>
 *       <Button
 *         aria-label="Next Slide"
 *         onClick={increment}
 *         disabled={activeIndex === slides.length - 1}
 *         buttonType="icon"
 *       >
 *         <ChevronRightIcon />
 *       </Button>
 *     </div>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0
 * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}
 * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}
 */ export function useCarousel(options) {
    const { duration = 8000, totalSlides } = options;
    const total = totalSlides - 1;
    const [state, setCarouselSlideState] = useState({
        direction: "left",
        activeIndex: 0
    });
    const { toggled: paused, toggle: togglePaused, setToggled: setPaused } = useToggle(false);
    const setActiveIndex = useCallback((activeIndexOrGetter)=>{
        setCarouselSlideState((prevState)=>{
            const prevActiveIndex = prevState.activeIndex;
            const nextActiveIndex = typeof activeIndexOrGetter === "function" ? activeIndexOrGetter(prevActiveIndex) : activeIndexOrGetter;
            return {
                direction: prevActiveIndex < nextActiveIndex ? "left" : "right",
                activeIndex: nextActiveIndex
            };
        });
    }, []);
    const increment = useCallback(()=>{
        setCarouselSlideState((prevState)=>({
                direction: "left",
                activeIndex: Math.min(total, prevState.activeIndex + 1)
            }));
    }, [
        total
    ]);
    const decrement = useCallback(()=>{
        setCarouselSlideState((prevState)=>({
                direction: "right",
                activeIndex: Math.max(0, prevState.activeIndex - 1)
            }));
    }, []);
    const { activeIndex } = state;
    useEffect(()=>{
        if (paused) {
            return;
        }
        const timeout = window.setTimeout(()=>{
            const nextActiveIndex = loop({
                min: 0,
                max: total,
                value: activeIndex,
                increment: true
            });
            setCarouselSlideState({
                direction: activeIndex < nextActiveIndex ? "left" : "right",
                activeIndex: nextActiveIndex
            });
        }, duration);
        return ()=>{
            window.clearTimeout(timeout);
        };
    }, [
        paused,
        duration,
        activeIndex,
        total
    ]);
    return {
        ...state,
        increment,
        decrement,
        paused,
        setPaused,
        togglePaused,
        setActiveIndex,
        setCarouselSlideState
    };
}

//# sourceMappingURL=useCarousel.js.map