"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState } from "react";
import { useAppSize } from "../media-queries/AppSizeProvider.js";
import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
import { TabListScrollButton } from "./TabListScrollButton.js";
import { tabList } from "./tabListStyles.js";
import { useTabList } from "./useTabList.js";
/**
 * **Client Component**
 *
 * @see {@link useTabs} for example usage.
 *
 * @since 6.0.0
 */ export const TabList = /*#__PURE__*/ forwardRef(function TabList(props, ref) {
    const { style, onClick, onFocus, onKeyDown, className, children, activeIndex, setActiveIndex, activationMode = "manual", align = "left", padded = false, inline = false, vertical = false, scrollbar = false, scrollButtons = false, disableTransition = false, transitionDuration = 150, getScrollToOptions, forwardScrollButtonProps, backwardScrollButtonProps, ...remaining } = props;
    const { isPhone } = useAppSize();
    const showScrollButtons = !!scrollButtons && (scrollButtons === "allow-phone" || !isPhone);
    const { elementProps, movementContext, backwardProps, forwardProps } = useTabList({
        ref,
        style,
        onClick,
        onFocus,
        onKeyDown,
        vertical,
        activeIndex,
        setActiveIndex,
        activationMode,
        scrollButtons: showScrollButtons,
        disableTransition
    });
    const prevActiveIndex = useRef(activeIndex);
    const [animate, setAnimate] = useState(false);
    useEffect(()=>{
        const isSameIndex = activeIndex === prevActiveIndex.current;
        prevActiveIndex.current = activeIndex;
        if (disableTransition || isSameIndex) {
            return;
        }
        setAnimate(true);
        const timeout = window.setTimeout(()=>{
            setAnimate(false);
        }, transitionDuration);
        return ()=>{
            window.clearTimeout(timeout);
        };
    }, [
        activeIndex,
        disableTransition,
        transitionDuration
    ]);
    return /*#__PURE__*/ _jsx(KeyboardMovementProvider, {
        value: movementContext,
        children: /*#__PURE__*/ _jsxs("div", {
            ...remaining,
            ...elementProps,
            role: "tablist",
            className: tabList({
                align,
                padded,
                inline,
                animate: !disableTransition && animate,
                vertical,
                scrollbar,
                indicator: !disableTransition,
                className
            }),
            children: [
                showScrollButtons && /*#__PURE__*/ _jsx(TabListScrollButton, {
                    getScrollToOptions: getScrollToOptions,
                    ...backwardScrollButtonProps,
                    ...backwardProps
                }),
                children,
                showScrollButtons && /*#__PURE__*/ _jsx(TabListScrollButton, {
                    getScrollToOptions: getScrollToOptions,
                    ...forwardScrollButtonProps,
                    ...forwardProps
                })
            ]
        })
    });
});

//# sourceMappingURL=TabList.js.map