"use client";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.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 { Box } from "../../../core/Box/Box.mjs";
import { ColorPickerContext } from "../ColorPicker.context.mjs";
import { Thumb } from "../Thumb/Thumb.mjs";
import ColorPicker_module_default from "../ColorPicker.module.mjs";
import { createElement, use, useRef, useState } from "react";
import { clampUseMovePosition, useDidUpdate, useMergedRef, useMove } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ColorPicker/ColorSlider/ColorSlider.tsx
const ColorSlider = factory((_props) => {
	const props = useProps("ColorSlider", null, _props);
	const { classNames, className, style, styles, unstyled, vars, onChange, onChangeEnd, maxValue, round, size = "md", focusable = true, value, overlays, thumbColor = "transparent", onScrubStart, onScrubEnd, __staticSelector = "ColorPicker", attributes, ref, ...others } = props;
	const _getStyles = useStyles({
		name: __staticSelector,
		classes: ColorPicker_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		rootSelector: "slider"
	});
	const getStyles = use(ColorPickerContext)?.getStyles || _getStyles;
	const theme = useMantineTheme();
	const [position, setPosition] = useState({
		y: 0,
		x: value / maxValue
	});
	const positionRef = useRef(position);
	const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
	const { ref: sliderRef } = useMove(({ x, y }) => {
		positionRef.current = {
			x,
			y
		};
		onChange?.(getChangeValue(x));
	}, {
		onScrubEnd: () => {
			const { x } = positionRef.current;
			onChangeEnd?.(getChangeValue(x));
			onScrubEnd?.();
		},
		onScrubStart
	});
	useDidUpdate(() => {
		setPosition({
			y: 0,
			x: value / maxValue
		});
	}, [value]);
	const handleArrow = (event, pos) => {
		event.preventDefault();
		const _position = clampUseMovePosition(pos);
		onChange?.(getChangeValue(_position.x));
		onChangeEnd?.(getChangeValue(_position.x));
	};
	const handleKeyDown = (event) => {
		switch (event.key) {
			case "ArrowRight":
				handleArrow(event, {
					x: position.x + .05,
					y: position.y
				});
				break;
			case "ArrowLeft":
				handleArrow(event, {
					x: position.x - .05,
					y: position.y
				});
				break;
		}
	};
	const layers = overlays.map((overlay, index) => /* @__PURE__ */ createElement("div", {
		...getStyles("sliderOverlay"),
		style: overlay,
		key: index
	}));
	return /* @__PURE__ */ jsxs(Box, {
		...others,
		ref: useMergedRef(sliderRef, ref),
		...getStyles("slider"),
		size,
		role: "slider",
		"aria-valuenow": value,
		"aria-valuemax": maxValue,
		"aria-valuemin": 0,
		tabIndex: focusable ? 0 : -1,
		onKeyDown: handleKeyDown,
		"data-focus-ring": theme.focusRing,
		__vars: { "--cp-thumb-size": `var(--cp-thumb-size-${size})` },
		children: [layers, /* @__PURE__ */ jsx(Thumb, {
			position,
			...getStyles("thumb", { style: {
				top: rem(1),
				background: thumbColor
			} })
		})]
	});
});
ColorSlider.displayName = "@mantine/core/ColorSlider";
ColorSlider.classes = ColorPicker_module_default;
//#endregion
export { ColorSlider };

//# sourceMappingURL=ColorSlider.mjs.map