"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useCallback, useRef, useState } from "react";
import { Button } from "../button/Button.js";
import { getIcon } from "../icon/config.js";
import { useDir } from "../typography/WritingDirectionProvider.js";
import { useIntersectionObserver } from "../useIntersectionObserver.js";
import { applyRef } from "../utils/applyRef.js";
import { getTabListScrollToOptions } from "./getTabListScrollToOptions.js";
import { tabListScrollButton, tabListScrollButtonContainer } from "./tabListScrollButtonStyles.js";
/**
 * **Client Component**
 *
 * @internal
 * @since 6.0.0
 */ export const TabListScrollButton = /*#__PURE__*/ forwardRef(function TabListScrollButton(props, ref) {
    const { "aria-label": ariaLabel, className, buttonProps, type, theme, themeType, buttonType = "icon", disabled: propDisabled, children: propChildren, getScrollToOptions = getTabListScrollToOptions, vertical = false, disableTransition = false, ...remaining } = props;
    const forward = type === "forward";
    const iconButton = buttonType === "icon";
    const icon = getIcon(type);
    const children = propChildren || icon;
    const root = useRef(null);
    const isRTL = useDir().dir === "rtl";
    const [disabled, setDisabled] = useState(!forward);
    const nodeRef = useIntersectionObserver({
        root,
        rootMargin: "1px",
        onUpdate: useCallback(([entry])=>{
            setDisabled(entry.intersectionRatio === 1);
        }, [])
    });
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            !forward && /*#__PURE__*/ _jsx("span", {
                ref: nodeRef
            }),
            /*#__PURE__*/ _jsx("div", {
                ...remaining,
                ref: (instance)=>{
                    applyRef(instance, ref);
                    root.current = instance?.parentElement || null;
                },
                className: tabListScrollButtonContainer({
                    forward,
                    vertical,
                    className
                }),
                children: /*#__PURE__*/ _jsx(Button, {
                    "aria-label": ariaLabel || (iconButton ? type : undefined),
                    theme: theme,
                    themeType: themeType,
                    buttonType: buttonType,
                    disabled: propDisabled || disabled,
                    ...buttonProps,
                    className: tabListScrollButton({
                        className: buttonProps?.className,
                        vertical
                    }),
                    onClick: (event)=>{
                        buttonProps?.onClick?.(event);
                        const container = root.current;
                        if (!container) {
                            return;
                        }
                        container.scrollTo(getScrollToOptions({
                            isRTL,
                            animate: !disableTransition,
                            vertical,
                            container,
                            increment: forward
                        }));
                    },
                    children: children
                })
            }),
            forward && /*#__PURE__*/ _jsx("span", {
                ref: nodeRef
            })
        ]
    });
});

//# sourceMappingURL=TabListScrollButton.js.map