"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef, useEffect, useState } from "react";
import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
import { bem } from "../utils/bem.js";
import { SliderValueTooltip } from "./SliderValueTooltip.js";
const styles = bem("rmd-slider-thumb");
const noop = ()=>{
// do nothing
};
/**
 * @internal
 * @remarks \@since 6.0.0
 */ function sliderThumb(options) {
    const { className, mask, index, active, animate, disabled, vertical } = options;
    const isSecondThumb = index === 2;
    return cnb(styles({
        h: !vertical,
        h1: !vertical && !isSecondThumb,
        h2: !vertical && isSecondThumb,
        v: vertical,
        v1: vertical && !isSecondThumb,
        v2: vertical && isSecondThumb,
        mask,
        "mask-h": mask && !vertical,
        "mask-v": mask && vertical,
        active,
        animate,
        disabled,
        "disabled-h": disabled && !vertical && !mask,
        "disabled-v": disabled && vertical && !mask
    }), className);
}
/**
 * **Client Component**
 *
 * @internal
 * @remarks
 * \@since 2.5.0
 * \@since 6.0.0 Internal only component.
 */ export const SliderThumb = /*#__PURE__*/ forwardRef(function SliderThumb(props, ref) {
    const { id, min, max, name, value, onChange, index, getValueText, step, active, animate, disabled, vertical, discrete, tabIndex = disabled ? -1 : 0, className, onFocus = noop, onKeyDown = noop, onMouseEnter = noop, onMouseLeave = noop, tooltipProps, getTooltipProps, getTooltipChildren, disableSmoothDragging, tooltipVisibility = "auto", ...remaining } = props;
    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
    const isFirstThumb = index === 1;
    const mode = useUserInteractionMode();
    const keyboard = mode === "keyboard";
    const touch = mode === "touch";
    const [mouseVisible, setMouseVisible] = useState(false);
    const [keyboardVisible, setKeyboardVisible] = useState(false);
    useEffect(()=>{
        if (disabled || !discrete) {
            setKeyboardVisible(false);
            return;
        }
        // if the mode changes away from keyboard, need to disable the keyboard
        // state
        setKeyboardVisible((prevVisible)=>prevVisible && mode === "keyboard");
    }, [
        disabled,
        discrete,
        mode
    ]);
    useEffect(()=>{
        if (disabled || !discrete) {
            setMouseVisible(false);
            return;
        }
        setMouseVisible((prevVisible)=>prevVisible && mode !== "touch");
    }, [
        disabled,
        discrete,
        mode
    ]);
    useEffect(()=>{
        if (!keyboardVisible) {
            return;
        }
        const callback = ()=>{
            setKeyboardVisible(false);
        };
        window.addEventListener("blur", callback, true);
        return ()=>{
            window.removeEventListener("blur", callback);
        };
    }, [
        keyboardVisible
    ]);
    const classNameOptions = {
        index,
        active,
        animate: !disableSmoothDragging && animate,
        disabled,
        vertical,
        className
    };
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            disabled && /*#__PURE__*/ _jsx("span", {
                className: sliderThumb({
                    ...classNameOptions,
                    mask: true
                })
            }),
            /*#__PURE__*/ _jsx("span", {
                ...remaining,
                id: id,
                ref: ref,
                role: "slider",
                "aria-disabled": disabled || undefined,
                "aria-orientation": vertical ? "vertical" : undefined,
                "aria-valuemax": max,
                "aria-valuemin": min,
                "aria-valuenow": value,
                "aria-valuetext": getValueText(value) || undefined,
                tabIndex: tabIndex,
                className: sliderThumb(classNameOptions),
                onFocus: (event)=>{
                    onFocus(event);
                    if (discrete && keyboard) {
                        setKeyboardVisible(true);
                    }
                },
                onKeyDown: (event)=>{
                    onKeyDown(event);
                    // this allows the tooltip to be visible when switching from mouse to
                    // keyboard
                    if (discrete && event.key !== "Tab") {
                        setKeyboardVisible(true);
                    }
                },
                onMouseEnter: (event)=>{
                    onMouseEnter(event);
                    if (discrete && tooltipVisibility === "hover" && !touch) {
                        setMouseVisible(true);
                    }
                },
                onMouseLeave: (event)=>{
                    onMouseLeave(event);
                    if (discrete && tooltipVisibility === "hover" && !touch) {
                        setMouseVisible(false);
                    }
                }
            }),
            /*#__PURE__*/ _jsx("input", {
                "aria-label": ariaLabel,
                "aria-labelledby": ariaLabelledBy,
                "aria-hidden": true,
                id: `${id}-value`,
                type: "range",
                name: name,
                min: min,
                max: max,
                step: step,
                value: value,
                tabIndex: -1,
                onChange: onChange,
                className: styles("input")
            }),
            discrete && /*#__PURE__*/ _jsx(SliderValueTooltip, {
                position: vertical ? "left" : "above",
                vertical: vertical,
                animate: !disableSmoothDragging && !active,
                visible: tooltipVisibility === "always" || active || keyboardVisible || mouseVisible,
                ...tooltipProps,
                ...getTooltipProps(value, isFirstThumb),
                index: index,
                children: getTooltipChildren(value, isFirstThumb)
            })
        ]
    });
});

//# sourceMappingURL=SliderThumb.js.map