"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { useDraggable } from "../draggable/useDraggable.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { identity } from "../utils/identity.js";
import { withinRange } from "../utils/withinRange.js";
import { SliderContainer } from "./SliderContainer.js";
import { SliderThumb } from "./SliderThumb.js";
import { SliderTrack } from "./SliderTrack.js";
import { SliderValueMarks } from "./SliderValueMarks.js";
import { getJumpValue } from "./sliderUtils.js";
const emptyString = ()=>"";
const noop = ()=>{
// do nothing
};
export function Slider(props) {
    const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: propId, min = 0, max = 100, step = 1, jump: propJump, vertical = false, discrete = false, disabled = false, getValueText = emptyString, children, marks = false, value, setValue, rangeValue, setRangeValue, trackProps, thumbProps, minThumbProps, minThumbLabel, minThumbLabelledBy, maxThumbProps, maxThumbLabel, maxThumbLabelledBy, tooltipProps, containerRef, getMarkProps = noop, getMarkLabelProps = noop, tooltipVisibility = "auto", getTooltipProps = noop, getTooltipChildren = identity, disableSmoothDragging = !!marks, ...remaining } = props;
    const jump = getJumpValue({
        min,
        max,
        step,
        jump: propJump
    });
    const isRangeSlider = typeof value !== "number";
    const thumb1Id = useEnsuredId(propId, "slider");
    const thumb2Id = `${thumb1Id}-2`;
    const thumb1Ref = useRef(null);
    const thumb2Ref = useRef(null);
    let thumb1Max = max;
    let thumb2Min = min;
    let thumb1Label;
    let thumb1LabelledBy;
    let thumb2Label;
    let thumb2LabelledBy;
    let thumb1Value;
    let thumb2Value;
    let setThumb1Value;
    let setThumb2Value;
    if (!isRangeSlider) {
        thumb1Value = value;
        setThumb1Value = setValue;
        thumb2Value = max;
        setThumb2Value = noop;
        thumb1Label = ariaLabel;
        thumb1LabelledBy = ariaLabelledBy;
    } else {
        thumb1LabelledBy = minThumbLabelledBy;
        thumb1Label = minThumbLabel || (minThumbLabelledBy ? undefined : "Min");
        thumb2LabelledBy = maxThumbLabelledBy;
        thumb2Label = maxThumbLabel || (maxThumbLabelledBy ? undefined : "max");
        [thumb1Value, thumb2Value] = rangeValue;
        thumb1Max = thumb2Value - step;
        thumb2Min = thumb1Value + step;
        setThumb1Value = (valueOrSetter)=>{
            setRangeValue((prevRangeValue)=>{
                const value = typeof valueOrSetter === "number" ? valueOrSetter : valueOrSetter(prevRangeValue[0]);
                return [
                    value,
                    prevRangeValue[1]
                ];
            });
        };
        setThumb2Value = (valueOrSetter)=>{
            setRangeValue((prevRangeValue)=>{
                const value = typeof valueOrSetter === "number" ? valueOrSetter : valueOrSetter(prevRangeValue[1]);
                return [
                    prevRangeValue[0],
                    value
                ];
            });
        };
    }
    const [thumb1Dragging, setThumb1Dragging] = useState(false);
    const { onKeyDown: thumb1OnKeyDown, onMouseUp: thumb1OnMouseUp, onMouseDown: thumb1OnMouseDown, onMouseMove: thumb1OnMouseMove, onTouchStart: thumb1OnTouchStart, onTouchMove: thumb1OnTouchMove, dragPercentage: thumb1DragPercentage, draggableRef: thumb1DraggableRef } = useDraggable({
        ref: thumb1Ref,
        min,
        max: thumb1Max,
        rangeMax: max,
        step,
        value: thumb1Value,
        setValue: setThumb1Value,
        dragging: thumb1Dragging,
        setDragging: setThumb1Dragging,
        disabled,
        vertical,
        withinOffsetParent: true,
        disableDraggingCursorClassName: true,
        onKeyDown (event) {
            switch(event.key){
                case "PageUp":
                    event.preventDefault();
                    event.stopPropagation();
                    setThumb1Value((prevValue)=>withinRange({
                            min,
                            max: thumb1Max,
                            value: prevValue + jump
                        }));
                    break;
                case "PageDown":
                    event.preventDefault();
                    event.stopPropagation();
                    setThumb1Value((prevValue)=>withinRange({
                            min,
                            max: thumb1Max,
                            value: prevValue - jump
                        }));
                    break;
            }
        }
    });
    const [thumb2Dragging, setThumb2Dragging] = useState(false);
    const { onKeyDown: thumb2OnKeyDown, onMouseUp: thumb2OnMouseUp, onMouseDown: thumb2OnMouseDown, onMouseMove: thumb2OnMouseMove, onTouchStart: thumb2OnTouchStart, onTouchMove: thumb2OnTouchMove, dragPercentage: thumb2DragPercentage, draggableRef: thumb2DraggableRef } = useDraggable({
        ref: thumb2Ref,
        min: thumb2Min,
        max,
        rangeMin: min,
        step,
        value: thumb2Value,
        setValue: setThumb2Value,
        dragging: thumb2Dragging,
        setDragging: setThumb2Dragging,
        vertical,
        disabled,
        withinOffsetParent: true,
        disableDraggingCursorClassName: true,
        onKeyDown (event) {
            switch(event.key){
                case "PageUp":
                    event.preventDefault();
                    event.stopPropagation();
                    setThumb2Value((prevValue)=>withinRange({
                            min: thumb2Min,
                            max,
                            value: prevValue + jump
                        }));
                    break;
                case "PageDown":
                    event.preventDefault();
                    event.stopPropagation();
                    setThumb2Value((prevValue)=>withinRange({
                            min: thumb2Min,
                            max,
                            value: prevValue - jump
                        }));
                    break;
            }
        }
    });
    const dragging = thumb1Dragging || thumb2Dragging;
    const sharedThumbProps = {
        step,
        animate: !dragging,
        discrete,
        disabled,
        vertical,
        getValueText,
        tooltipProps,
        getTooltipProps,
        getTooltipChildren,
        tooltipVisibility,
        disableSmoothDragging
    };
    return /*#__PURE__*/ _jsx(SliderContainer, {
        ...remaining,
        ref: containerRef,
        vertical: vertical,
        children: /*#__PURE__*/ _jsxs(SliderTrack, {
            ...trackProps,
            min: min,
            max: max,
            thumb1Ref: thumb1Ref,
            thumb1Value: thumb1Value,
            thumb1Dragging: !disableSmoothDragging && thumb1Dragging,
            thumb1DragPercentage: thumb1DragPercentage,
            thumb1OnMouseUp: thumb1OnMouseUp,
            thumb1OnMouseDown: thumb1OnMouseDown,
            thumb1OnMouseMove: thumb1OnMouseMove,
            thumb1OnTouchStart: thumb1OnTouchStart,
            thumb1OnTouchMove: thumb1OnTouchMove,
            thumb2Ref: thumb2Ref,
            thumb2Value: thumb2Value,
            thumb2Dragging: !disableSmoothDragging && thumb2Dragging,
            thumb2DragPercentage: thumb2DragPercentage,
            thumb2OnMouseUp: thumb2OnMouseUp,
            thumb2OnMouseDown: thumb2OnMouseDown,
            thumb2OnMouseMove: thumb2OnMouseMove,
            thumb2OnTouchStart: thumb2OnTouchStart,
            thumb2OnTouchMove: thumb2OnTouchMove,
            animate: !disableSmoothDragging && !dragging,
            disabled: disabled,
            vertical: vertical,
            isRangeSlider: isRangeSlider,
            children: [
                /*#__PURE__*/ _jsx(SliderThumb, {
                    "aria-label": thumb1Label,
                    "aria-labelledby": thumb1LabelledBy,
                    id: thumb1Id,
                    ...thumbProps,
                    ...minThumbProps,
                    ...sharedThumbProps,
                    ref: thumb1DraggableRef,
                    min: min,
                    max: thumb1Max,
                    value: thumb1Value,
                    index: 1,
                    active: thumb1Dragging,
                    onChange: (event)=>setThumb1Value(event.currentTarget.valueAsNumber),
                    onKeyDown: thumb1OnKeyDown
                }),
                isRangeSlider && /*#__PURE__*/ _jsx(SliderThumb, {
                    "aria-label": thumb2Label,
                    "aria-labelledby": thumb2LabelledBy,
                    id: thumb2Id,
                    ...maxThumbProps,
                    ...sharedThumbProps,
                    ref: thumb2DraggableRef,
                    min: thumb2Min,
                    max: max,
                    value: thumb2Value,
                    index: 2,
                    active: thumb2Dragging,
                    onChange: (event)=>setThumb2Value(event.currentTarget.valueAsNumber),
                    onKeyDown: thumb2OnKeyDown
                }),
                marks && /*#__PURE__*/ _jsx(SliderValueMarks, {
                    min: min,
                    max: max,
                    step: step,
                    marks: marks,
                    vertical: vertical,
                    thumb1Value: thumb1Value,
                    thumb2Value: thumb2Value,
                    isRangeSlider: isRangeSlider,
                    getMarkProps: getMarkProps,
                    getMarkLabelProps: getMarkLabelProps
                }),
                children
            ]
        })
    });
}

//# sourceMappingURL=Slider.js.map