import { jsxs, jsx } from 'react/jsx-runtime';
import { useContext, useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { Slider } from '../Slider/Slider.js';
import '../Slider/Slider.theme.js';
import { ColorPickerContext } from './ColorPicker.js';
import { formatRgb } from './colorUtils.js';

/**
 * ColorPickerSliders - Compact Hue and Alpha sliders
 * Matches reference design with inline values
 */
const ColorPickerSliders = ({ showLabels = false, className, ...props }) => {
    const context = useContext(ColorPickerContext);
    if (!context) {
        throw new Error('ColorPickerSliders must be used within a ColorPicker');
    }
    const { color, setHue, setAlpha, showAlpha, theme } = context;
    const { h, s, l, a } = color;
    // Hue gradient (rainbow)
    const hueGradient = useMemo(() => 'linear-gradient(to right, ' +
        '#FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%)', []);
    // Alpha gradient with checkerboard
    const alphaGradient = useMemo(() => {
        return `linear-gradient(to right, ${formatRgb(h, s, l, 0)}, ${formatRgb(h, s, l, 1)})`;
    }, [h, s, l]);
    const checkerboardBackground = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")';
    return (jsxs("div", { className: cn(theme.sliderContainerStyle, 'space-y-2', className), ...props, children: [jsx(Slider, { min: 0, max: 360, step: 1, value: h, onChange: (value) => setHue(value), "aria-label": "Hue", showValue: false, theme: {
                    trackStyle: `h-2 rounded-full`,
                    rangeStyle: 'h-full rounded-full bg-transparent',
                    thumbStyle: 'size-4 rounded-full border-2 border-white shadow-md',
                }, style: {
                    ['--slider-track-bg']: hueGradient,
                }, className: "[&_.slider-track]:bg-[image:var(--slider-track-bg)]" }), showAlpha && (jsx(Slider, { min: 0, max: 1, step: 0.01, value: a, onChange: (value) => setAlpha(value), "aria-label": "Opacity", showValue: false, theme: {
                    trackStyle: `h-2 rounded-full`,
                    rangeStyle: 'h-full rounded-full bg-transparent',
                    thumbStyle: 'size-4 rounded-full border-2 border-white shadow-md',
                }, style: {
                    ['--slider-track-bg']: `${checkerboardBackground}, ${alphaGradient}`,
                }, className: "[&_.slider-track]:bg-[length:8px_8px,100%] [&_.slider-track]:bg-[image:var(--slider-track-bg)]" }))] }));
};
ColorPickerSliders.displayName = 'ColorPickerSliders';

export { ColorPickerSliders };
