"use client";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import { getRadius, getSize } from "../../../core/utils/get-size/get-size.mjs";
import { findClosestNumber } from "../../../core/utils/find-closest-number/find-closest-number.mjs";
import { createVarsResolver } from "../../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { SliderProvider } from "../Slider.context.mjs";
import { SliderRoot } from "../SliderRoot/SliderRoot.mjs";
import { Thumb } from "../Thumb/Thumb.mjs";
import { getPosition } from "../utils/get-position/get-position.mjs";
import { Track } from "../Track/Track.mjs";
import { getChangeValue } from "../utils/get-change-value/get-change-value.mjs";
import { getFloatingValue } from "../utils/get-floating-value/get-floating-value.mjs";
import { getPrecision } from "../utils/get-precision/get-precision.mjs";
import { getFirstMarkValue, getLastMarkValue, getNextMarkValue, getPreviousMarkValue } from "../utils/get-step-mark-value/get-step-mark-value.mjs";
import Slider_module_default from "../Slider.module.mjs";
import { useCallback, useEffect, useRef, useState } from "react";
import { clamp, useMergedRef, useMove, useUncontrolled } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Slider/Slider/Slider.tsx
const defaultProps = {
	radius: "xl",
	min: 0,
	max: 100,
	step: 1,
	marks: [],
	label: (f) => f,
	labelTransitionProps: {
		transition: "fade",
		duration: 0
	},
	thumbLabel: "",
	showLabelOnHover: true,
	scale: (v) => v,
	size: "md"
};
const varsResolver = createVarsResolver((theme, { size, color, thumbSize, radius }) => ({ root: {
	"--slider-size": getSize(size, "slider-size"),
	"--slider-color": color ? getThemeColor(color, theme) : void 0,
	"--slider-radius": radius === void 0 ? void 0 : getRadius(radius),
	"--slider-thumb-size": thumbSize !== void 0 ? rem(thumbSize) : "calc(var(--slider-size) * 2)"
} }));
const Slider = factory((_props) => {
	const props = useProps("Slider", defaultProps, _props);
	const { classNames, styles, value, onChange, onChangeEnd, size, min, max, domain, step, precision: _precision, defaultValue, name, marks, label, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, showLabelOnHover, thumbChildren, disabled, unstyled, scale, inverted, startPointValue, orientation, className, style, vars, hiddenInputProps, restrictToMarks, thumbProps, attributes, ref, ...others } = props;
	const getStyles = useStyles({
		name: "Slider",
		props,
		classes: Slider_module_default,
		classNames,
		className,
		styles,
		style,
		attributes,
		vars,
		varsResolver,
		unstyled
	});
	const { dir } = useDirection();
	const [hovered, setHovered] = useState(false);
	const [_value, setValue] = useUncontrolled({
		value: typeof value === "number" ? clamp(value, min, max) : value,
		defaultValue: typeof defaultValue === "number" ? clamp(defaultValue, min, max) : defaultValue,
		finalValue: clamp(0, min, max),
		onChange
	});
	const valueRef = useRef(_value);
	const onChangeEndRef = useRef(onChangeEnd);
	useEffect(() => {
		onChangeEndRef.current = onChangeEnd;
	}, [onChangeEnd]);
	const root = useRef(null);
	const thumb = useRef(null);
	const [domainMin, domainMax] = domain || [min, max];
	const position = getPosition({
		value: _value,
		min: domainMin,
		max: domainMax
	});
	const scaledValue = scale(_value);
	const _label = typeof label === "function" ? label(scaledValue) : label;
	const precision = _precision ?? getPrecision(step);
	const hasStartPoint = typeof startPointValue === "number" && !inverted;
	const startPosition = hasStartPoint ? getPosition({
		value: startPointValue,
		min: domainMin,
		max: domainMax
	}) : 0;
	const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;
	const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;
	const handleChange = useCallback(({ x }) => {
		if (!disabled) {
			const clampedValue = clamp(getChangeValue({
				value: x,
				min: domainMin,
				max: domainMax,
				step,
				precision
			}), min, max);
			setValue(restrictToMarks && marks?.length ? findClosestNumber(clampedValue, marks.map((mark) => mark.value)) : clampedValue);
			valueRef.current = clampedValue;
		}
	}, [
		disabled,
		min,
		max,
		domainMin,
		domainMax,
		step,
		precision,
		setValue,
		marks,
		restrictToMarks
	]);
	const { ref: container, active } = useMove(({ x, y }) => handleChange({ x: orientation === "vertical" ? 1 - y : x }), { onScrubEnd: useCallback(() => {
		if (!disabled && onChangeEndRef.current) {
			const finalValue = restrictToMarks && marks?.length ? findClosestNumber(valueRef.current, marks.map((mark) => mark.value)) : valueRef.current;
			onChangeEndRef.current(finalValue);
		}
	}, [
		disabled,
		marks,
		restrictToMarks
	]) }, dir);
	const callOnChangeEnd = useCallback((value) => {
		if (!disabled && onChangeEndRef.current) onChangeEndRef.current(value);
	}, [disabled]);
	const handleTrackKeydownCapture = (event) => {
		if (!disabled) switch (event.key) {
			case "ArrowUp": {
				event.preventDefault();
				thumb.current?.focus();
				if (restrictToMarks && marks) {
					const nextValue = getNextMarkValue(_value, marks);
					setValue(nextValue);
					callOnChangeEnd(nextValue);
					break;
				}
				const nextValue = getFloatingValue(Math.min(Math.max(_value + step, domainMin), domainMax), precision);
				setValue(nextValue);
				callOnChangeEnd(nextValue);
				break;
			}
			case "ArrowRight": {
				event.preventDefault();
				thumb.current?.focus();
				if (restrictToMarks && marks) {
					const nextValue = dir === "rtl" ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);
					setValue(nextValue);
					callOnChangeEnd(nextValue);
					break;
				}
				const nextValue = getFloatingValue(Math.min(Math.max(dir === "rtl" ? _value - step : _value + step, domainMin), domainMax), precision);
				setValue(nextValue);
				callOnChangeEnd(nextValue);
				break;
			}
			case "ArrowDown": {
				event.preventDefault();
				thumb.current?.focus();
				if (restrictToMarks && marks) {
					const nextValue = getPreviousMarkValue(_value, marks);
					setValue(nextValue);
					callOnChangeEnd(nextValue);
					break;
				}
				const nextValue = getFloatingValue(Math.min(Math.max(_value - step, domainMin), domainMax), precision);
				setValue(nextValue);
				callOnChangeEnd(nextValue);
				break;
			}
			case "ArrowLeft": {
				event.preventDefault();
				thumb.current?.focus();
				if (restrictToMarks && marks) {
					const nextValue = dir === "rtl" ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);
					setValue(nextValue);
					callOnChangeEnd(nextValue);
					break;
				}
				const nextValue = getFloatingValue(Math.min(Math.max(dir === "rtl" ? _value + step : _value - step, domainMin), domainMax), precision);
				setValue(nextValue);
				callOnChangeEnd(nextValue);
				break;
			}
			case "Home":
				event.preventDefault();
				thumb.current?.focus();
				if (restrictToMarks && marks) {
					setValue(getFirstMarkValue(marks));
					callOnChangeEnd(getFirstMarkValue(marks));
					break;
				}
				setValue(min);
				callOnChangeEnd(min);
				break;
			case "End":
				event.preventDefault();
				thumb.current?.focus();
				if (restrictToMarks && marks) {
					setValue(getLastMarkValue(marks));
					callOnChangeEnd(getLastMarkValue(marks));
					break;
				}
				setValue(max);
				callOnChangeEnd(max);
				break;
			default: break;
		}
	};
	return /* @__PURE__ */ jsx(SliderProvider, {
		value: { getStyles },
		children: /* @__PURE__ */ jsxs(SliderRoot, {
			...others,
			ref: useMergedRef(ref, root),
			onKeyDownCapture: handleTrackKeydownCapture,
			onMouseDownCapture: () => root.current?.focus(),
			size,
			disabled,
			orientation,
			children: [/* @__PURE__ */ jsx(Track, {
				inverted,
				offset: trackOffset,
				filled: trackFilled,
				marks,
				min: domainMin,
				max: domainMax,
				value: scaledValue,
				startPointValue: hasStartPoint ? startPointValue : void 0,
				disabled,
				containerProps: {
					ref: container,
					onMouseEnter: showLabelOnHover ? () => setHovered(true) : void 0,
					onMouseLeave: showLabelOnHover ? () => setHovered(false) : void 0
				},
				children: /* @__PURE__ */ jsx(Thumb, {
					max: domainMax,
					min: domainMin,
					value: scaledValue,
					position,
					dragging: active,
					label: _label,
					ref: thumb,
					labelTransitionProps,
					labelAlwaysOn,
					thumbLabel,
					thumbValueText,
					showLabelOnHover,
					isHovered: hovered,
					disabled,
					orientation,
					...thumbProps,
					children: thumbChildren
				})
			}), /* @__PURE__ */ jsx("input", {
				type: "hidden",
				name,
				value: scaledValue,
				...hiddenInputProps
			})]
		})
	});
});
Slider.classes = Slider_module_default;
Slider.varsResolver = varsResolver;
Slider.displayName = "@mantine/core/Slider";
//#endregion
export { Slider };

//# sourceMappingURL=Slider.mjs.map