import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { rangeColors } from "./consts.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import Box from "../box/box.js";
import Tooltip from "../tooltip/tooltip.js";
import { jsx } from "react/jsx-runtime";
import ReactSlider from "react-slider";

//#region src/range/range.tsx
const SliderBase = styled(ReactSlider)`
  width: 100%;
  height: 4px;
  cursor: pointer;
  transition-duration: '0s';
`;
const defaultFormatter = (value) => `${value}`;
/** Implements a range input. */
const Range = vui((props, ref) => {
	const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip = false, showValue = false, formatter = defaultFormatter, onChange, ...rest } = props;
	const styles = useStyleConfig("Range", props);
	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
	const isSingleValue = typeof defaultValue !== "object" && typeof value !== "object";
	const mainColor = disabled ? rangeColors.disabled : rangeColors.main;
	const getTrackColor = (trackProps) => {
		const { key } = trackProps;
		if (isSingleValue) return key === "track-0" ? mainColor : rangeColors.track;
		return key === "track-2" ? rangeColors.track : key === "track-1" ? mainColor : rangeColors.track;
	};
	const Thumb = (props, state) => {
		const { key, ...thumbProps } = props;
		const thumbKey = key ?? state.index;
		const content = /* @__PURE__ */ jsx(Box, {
			className: "vui-range-thumb",
			...styles.thumb,
			borderColor: mainColor,
			...thumbProps,
			children: showValue && /* @__PURE__ */ jsx(Box, {
				center: true,
				className: "vui-range-thumb-value",
				...styles.thumbValue,
				children: formatter(state.valueNow)
			})
		});
		return showValue ? /* @__PURE__ */ jsx(Box, { children: content }, thumbKey) : /* @__PURE__ */ jsx(Tooltip, {
			disabled,
			text: formatter(state.valueNow),
			visible: showTooltip,
			children: content
		}, thumbKey);
	};
	const Track = (props, state) => {
		const { key, ...trackProps } = props;
		return /* @__PURE__ */ jsx(Box, {
			...styles.track,
			bg: getTrackColor(props),
			className: "vui-range-track",
			...trackProps,
			index: state.index
		}, key);
	};
	return /* @__PURE__ */ jsx(Box, {
		className: cs("vui-range", isSingleValue ? "vui-range-single" : "vui-range-range", className),
		ref,
		...styles.container,
		...aliasedProps,
		...rest,
		children: /* @__PURE__ */ jsx(SliderBase, {
			className: "vui-range-slider",
			defaultValue,
			disabled,
			max,
			min,
			minDistance,
			onChange,
			renderThumb: Thumb,
			renderTrack: Track,
			step,
			value
		}, `${defaultValue}-${value}-${disabled}-${min}-${max}-${step}`)
	});
});
Range.displayName = "Range";

//#endregion
export { Range as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=range.js.map