import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Slider, Stack, Typography } from '@mui/material';
import { useHuGoTheme } from '../../hooks/useHuGoTheme';
import { generatePaletteFromHue, getContrastTextColor, } from '../../theme/hugo/colorPaletteGenerator';
import { HUE_GRADIENT } from './constants';
const STEP_NAMES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
const PaletteGeneratorContent = () => {
    const [hue, setHue] = useState(226);
    const currentSteps = generatePaletteFromHue(hue);
    const hex500 = currentSteps[5];
    const textColor = getContrastTextColor(hex500);
    return (_jsxs(Stack, { sx: { gap: 3 }, children: [_jsxs(Stack, { sx: { gap: 1 }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["Hue \u2014 ", hue, "\u00B0 \u2192", ' ', _jsx("code", { style: { fontFamily: 'monospace' }, children: hex500 })] }), _jsx(Slider, { value: hue, min: 0, max: 360, onChange: (_e, v) => setHue(Array.isArray(v) ? v[0] : v), sx: {
                            '& .MuiSlider-track': { background: 'transparent', border: 'none' },
                            '& .MuiSlider-rail': { background: HUE_GRADIENT, opacity: 1 },
                            '& .MuiSlider-thumb': {
                                backgroundColor: hex500,
                                border: '2px solid white',
                                boxShadow: '0 1px 4px rgba(0,0,0,0.3)',
                            },
                        }, valueLabelDisplay: "off" })] }), _jsxs(Stack, { sx: { gap: 1 }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Paleta generada" }), _jsx(Stack, { direction: "row", sx: { gap: 0.5 }, children: currentSteps.map((hex, i) => (_jsxs(Stack, { sx: { flex: 1, gap: 0.5 }, children: [_jsx("div", { title: `${STEP_NAMES[i]} · ${hex.toUpperCase()}`, style: {
                                        height: 48,
                                        borderRadius: 6,
                                        background: hex,
                                        outline: i === 5 ? '2.5px solid white' : 'none',
                                        outlineOffset: -3,
                                    } }), _jsx(Typography, { variant: "caption", sx: {
                                        fontFamily: 'monospace',
                                        fontSize: 9,
                                        textAlign: 'center',
                                        color: 'text.secondary',
                                    }, children: STEP_NAMES[i] })] }, STEP_NAMES[i]))) })] }), _jsxs(Stack, { direction: "row", sx: { gap: 1, alignItems: 'center' }, children: [_jsx("div", { style: {
                            height: 32,
                            padding: '0 16px',
                            borderRadius: 6,
                            background: hex500,
                            display: 'flex',
                            alignItems: 'center',
                            fontFamily: 'sans-serif',
                            fontSize: 13,
                            fontWeight: 600,
                            color: textColor,
                        }, children: "Button primary" }), _jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["text: ", textColor, " (auto-contrast WCAG AA)"] })] })] }));
};
const PaletteGenerator = () => {
    const { HuGoThemeProvider } = useHuGoTheme();
    return (_jsx(HuGoThemeProvider, { children: _jsx(PaletteGeneratorContent, {}) }));
};
export default PaletteGenerator;
