/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-032998c
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useCallback, useMemo, useState } from 'react';
import { Slider } from './Slider.js';
// Generate 7 hue stops (0, 60, 120, 180, 240, 300, 359) for full color spectrum
const HUE_STOPS = [0, 60, 120, 180, 240, 300, 359];
const HUE_SATURATION = 80;
const HUE_LIGHTNESS = 50;
const HUE_GRADIENT = HUE_STOPS.map((h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`).join(', ');
const horizontalTrackStyles = {
    image: `linear-gradient(to right, ${HUE_GRADIENT})`,
    Fill: false,
};
const verticalTrackStyles = {
    image: `linear-gradient(to top, ${HUE_GRADIENT})`,
    Fill: false,
};
function HueSlider(props, ref) {
    const { value, defaultValue = 0, onChange, orientation = 'horizontal', thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
    // Track internal value for uncontrolled mode
    const [internalValue, setInternalValue] = useState(defaultValue);
    // Use controlled value if provided, otherwise use internal state
    const currentHue = value ?? internalValue;
    // Handle onChange to update internal state in uncontrolled mode
    const handleChange = useCallback((newValue) => {
        if (value === undefined) {
            setInternalValue(newValue);
        }
        onChange?.(newValue);
    }, [value, onChange]);
    // Create dynamic thumb tokens with the current hue color
    const thumbTokens = useMemo(() => ({
        '#slider-thumb': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,
        '#slider-thumb-hovered': `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS - 10}%)`,
        ...userThumbTokens,
    }), [currentHue, userThumbTokens]);
    const thumbStyles = useMemo(() => ({
        outline: {
            '': '1bw #slider-thumb-hovered.0',
            focused: '1bw #slider-thumb-hovered',
        },
        ...userThumbStyles,
    }), [userThumbStyles]);
    const trackStyles = useMemo(() => ({
        ...(orientation === 'vertical'
            ? verticalTrackStyles
            : horizontalTrackStyles),
        ...userTrackStyles,
    }), [orientation, userTrackStyles]);
    return (_jsx(Slider, { ref: ref, value: value, defaultValue: defaultValue, orientation: orientation, minValue: 0, maxValue: 359, step: 1, thumbStyles: thumbStyles, trackStyles: trackStyles, thumbTokens: thumbTokens, onChange: handleChange, ...rest }));
}
const _HueSlider = forwardRef(HueSlider);
const __HueSlider = Object.assign(_HueSlider, {
    cubeInputType: 'Number',
    displayName: 'HueSlider',
});
export { __HueSlider as HueSlider };

        