import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Fragment } from "react";
import { getPercentage } from "../utils/getPercentage.js";
import { getRangeSteps } from "../utils/getRangeSteps.js";
import { SliderMark } from "./SliderMark.js";
import { SliderMarkLabel } from "./SliderMarkLabel.js";
/**
 * **Server Component**
 *
 * @internal
 * @since 6.0.0
 */ export function SliderValueMarks(props) {
    const { min, max, step, marks: propMarks, vertical, thumb1Value, thumb2Value, isRangeSlider, getMarkProps, getMarkLabelProps } = props;
    let marks;
    if (typeof propMarks === "boolean") {
        const steps = getRangeSteps({
            min,
            max,
            step
        }) + 1;
        marks = Array.from({
            length: steps
        }, (_, i)=>({
                value: min + i * step
            }));
    } else {
        marks = propMarks;
    }
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: marks.map(({ value, label: markLabel })=>{
            // I can't think of a good name, but this is when the slider's track's
            // active color is covering the mark which requires different styles
            let active;
            let percentage = getPercentage({
                min,
                max,
                value
            }) * 100;
            let markValue = value;
            if (vertical) {
                // need to reverse the percentage since it uses `top` for positioning
                // where the max value is at the top instead of bottom
                percentage = 100 - percentage;
                // need to reverse the mark's value as well for the same reason as
                // above
                markValue = max - value;
            }
            if (isRangeSlider) {
                active = markValue > thumb1Value && markValue < thumb2Value;
            } else {
                active = markValue < thumb1Value;
            }
            const offset = `${percentage}%`;
            const markProps = getMarkProps({
                value,
                active,
                offset
            });
            const labelProps = getMarkLabelProps({
                value,
                active,
                offset
            });
            const label = markLabel ?? labelProps?.children ?? null;
            return /*#__PURE__*/ _jsxs(Fragment, {
                children: [
                    /*#__PURE__*/ _jsx(SliderMark, {
                        ...markProps,
                        offset: offset,
                        active: active,
                        vertical: vertical
                    }),
                    label !== null && /*#__PURE__*/ _jsx(SliderMarkLabel, {
                        ...labelProps,
                        offset: offset,
                        vertical: vertical,
                        children: label
                    })
                ]
            }, value);
        })
    });
}

//# sourceMappingURL=SliderValueMarks.js.map