/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-29d58ba | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { OUTER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.js";
import { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { _Text } from "../../content/Text.js";
import { useFormProps } from "../../form/Form/Form.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { wrapWithField } from "../../form/wrapper.js";
import { SliderControlsElement, SliderElement } from "./elements.js";
import { useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useNumberFormatter, useSlider } from "react-aria";
import { useFocusableRef } from "@react-spectrum/utils";
import { useSliderState } from "react-stately";

//#region src/components/fields/Slider/SliderBase.tsx
const LabelValueElement = tasty(_Text, { styles: {
	display: "block",
	textAlign: "right"
} });
function SliderBase(allProps, ref) {
	let props = useFormProps(allProps);
	props = useFieldProps(props, {
		defaultValidationTrigger: "onChange",
		valuePropsMapper: ({ value, onChange }) => ({
			value: value != null ? value : void 0,
			onChange
		})
	});
	let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, form, labelProps: userLabelProps, ...otherProps } = props;
	let orientation = allProps.orientation || "horizontal";
	if (Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2) if (formatOptions != null) {
		if (!("signDisplay" in formatOptions)) formatOptions = {
			...formatOptions,
			signDisplay: "exceptZero"
		};
	} else formatOptions = { signDisplay: "exceptZero" };
	const formatter = useNumberFormatter(formatOptions);
	const state = useSliderState({
		...props,
		orientation,
		numberFormatter: formatter,
		minValue,
		maxValue
	});
	const trackRef = useRef(null);
	let { groupProps, trackProps, labelProps, outputProps } = useSlider(props, state, trackRef);
	const inputRef = useRef(null);
	let domRef = useFocusableRef(ref, inputRef);
	let displayValue = "";
	let maxLabelLength = 0;
	if (typeof getValueLabel === "function") {
		displayValue = getValueLabel(state.values);
		switch (state.values.length) {
			case 1:
				maxLabelLength = Math.max(getValueLabel([minValue]).length, getValueLabel([maxValue]).length);
				break;
			case 2:
				maxLabelLength = Math.max(getValueLabel([minValue, minValue]).length, getValueLabel([minValue, maxValue]).length, getValueLabel([maxValue, minValue]).length, getValueLabel([maxValue, maxValue]).length);
				break;
			default: throw new Error("Only sliders with 1 or 2 handles are supported!");
		}
	} else {
		maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
		switch (state.values.length) {
			case 1:
				displayValue = state.getThumbValueLabel(0);
				break;
			case 2:
				displayValue = `${state.getThumbValueLabel(0)} – ${state.getThumbValueLabel(1)}`;
				maxLabelLength = 3 + 2 * Math.max(maxLabelLength, [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
				break;
			default: throw new Error("Only sliders with 1 or 2 handles are supported!");
		}
	}
	extra = extra != null || !showValueLabel ? extra : /* @__PURE__ */ jsx(LabelValueElement, {
		...outputProps,
		style: maxLabelLength ? {
			width: `${maxLabelLength + 1}ch`,
			minWidth: `${maxLabelLength + 1}ch`
		} : void 0,
		children: displayValue
	});
	const mods = useMemo(() => ({
		"side-label": labelPosition === "side",
		horizontal: orientation === "horizontal"
	}), [labelPosition, orientation]);
	styles = extractStyles(otherProps, OUTER_STYLES, styles);
	return wrapWithField(/* @__PURE__ */ jsx(SliderElement, {
		ref: domRef,
		id: props.id,
		...groupProps,
		mods,
		styles,
		"data-input-type": "slider",
		children: /* @__PURE__ */ jsx(SliderControlsElement, {
			...trackProps,
			ref: trackRef,
			mods,
			children: children({
				trackRef,
				inputRef,
				state
			})
		})
	}), ref, {
		...props,
		extra,
		labelProps: mergeProps$1(labelProps, userLabelProps)
	});
}
const _SliderBase = forwardRefWithGenerics(SliderBase);
_SliderBase.displayName = "SliderBase";

//#endregion
export { _SliderBase };
//# sourceMappingURL=SliderBase.js.map