'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var PixelEditor_module = require('./PixelEditor.module.css.js');

// Convert hex to HSV
function hexToHSV(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if (!result)
        return [0, 0, 0];
    const r = parseInt(result[1], 16) / 255;
    const g = parseInt(result[2], 16) / 255;
    const b = parseInt(result[3], 16) / 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    const v = max;
    const d = max - min;
    const s = max === 0 ? 0 : d / max;
    let h = 0;
    if (max !== min) {
        switch (max) {
            case r:
                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
                break;
            case g:
                h = ((b - r) / d + 2) / 6;
                break;
            case b:
                h = ((r - g) / d + 4) / 6;
                break;
        }
    }
    return [h * 360, s, v];
}
// Convert HSV to hex
function hsvToHex(h, s, v) {
    const c = v * s;
    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
    const m = v - c;
    let r = 0, g = 0, b = 0;
    if (h < 60) {
        r = c;
        g = x;
    }
    else if (h < 120) {
        r = x;
        g = c;
    }
    else if (h < 180) {
        g = c;
        b = x;
    }
    else if (h < 240) {
        g = x;
        b = c;
    }
    else if (h < 300) {
        r = x;
        b = c;
    }
    else {
        r = c;
        b = x;
    }
    const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0");
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
const HSVPicker = ({ color, onChange }) => {
    const svCanvasRef = React.useRef(null);
    const hueCanvasRef = React.useRef(null);
    const [hue, saturation, value] = React.useMemo(() => hexToHSV(color), [color]);
    const [localHue, setLocalHue] = React.useState(hue);
    const [localSat, setLocalSat] = React.useState(saturation);
    const [localVal, setLocalVal] = React.useState(value);
    // Sync from prop when color changes externally
    React.useEffect(() => {
        const [h, s, v] = hexToHSV(color);
        setLocalHue(h);
        setLocalSat(s);
        setLocalVal(v);
    }, [color]);
    // Draw saturation-value gradient
    const drawSV = React.useCallback(() => {
        const canvas = svCanvasRef.current;
        if (!canvas)
            return;
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return;
        const w = canvas.width;
        const h = canvas.height;
        // Base hue color
        ctx.fillStyle = `hsl(${localHue}, 100%, 50%)`;
        ctx.fillRect(0, 0, w, h);
        // White gradient (left to right)
        const whiteGrad = ctx.createLinearGradient(0, 0, w, 0);
        whiteGrad.addColorStop(0, "rgba(255,255,255,1)");
        whiteGrad.addColorStop(1, "rgba(255,255,255,0)");
        ctx.fillStyle = whiteGrad;
        ctx.fillRect(0, 0, w, h);
        // Black gradient (top to bottom)
        const blackGrad = ctx.createLinearGradient(0, 0, 0, h);
        blackGrad.addColorStop(0, "rgba(0,0,0,0)");
        blackGrad.addColorStop(1, "rgba(0,0,0,1)");
        ctx.fillStyle = blackGrad;
        ctx.fillRect(0, 0, w, h);
        // Draw cursor
        const cx = localSat * w;
        const cy = (1 - localVal) * h;
        ctx.beginPath();
        ctx.arc(cx, cy, 6, 0, Math.PI * 2);
        ctx.strokeStyle = "#fff";
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.strokeStyle = "#000";
        ctx.lineWidth = 1;
        ctx.stroke();
    }, [localHue, localSat, localVal]);
    // Draw hue bar
    const drawHue = React.useCallback(() => {
        const canvas = hueCanvasRef.current;
        if (!canvas)
            return;
        const ctx = canvas.getContext("2d");
        if (!ctx)
            return;
        const w = canvas.width;
        const h = canvas.height;
        const grad = ctx.createLinearGradient(0, 0, w, 0);
        for (let i = 0; i <= 360; i += 60) {
            grad.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
        }
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, w, h);
        // Draw cursor
        const cx = (localHue / 360) * w;
        ctx.beginPath();
        ctx.moveTo(cx, 0);
        ctx.lineTo(cx, h);
        ctx.strokeStyle = "#fff";
        ctx.lineWidth = 2;
        ctx.stroke();
    }, [localHue]);
    React.useEffect(() => { drawSV(); }, [drawSV]);
    React.useEffect(() => { drawHue(); }, [drawHue]);
    const handleSVClick = React.useCallback((e) => {
        const canvas = svCanvasRef.current;
        if (!canvas)
            return;
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const s = Math.max(0, Math.min(1, x / canvas.width));
        const v = Math.max(0, Math.min(1, 1 - y / canvas.height));
        setLocalSat(s);
        setLocalVal(v);
        onChange(hsvToHex(localHue, s, v));
    }, [localHue, onChange]);
    const handleHueClick = React.useCallback((e) => {
        const canvas = hueCanvasRef.current;
        if (!canvas)
            return;
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const h = Math.max(0, Math.min(360, (x / canvas.width) * 360));
        setLocalHue(h);
        onChange(hsvToHex(h, localSat, localVal));
    }, [localSat, localVal, onChange]);
    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.hsvPicker, children: [jsxRuntime.jsx("canvas", { ref: svCanvasRef, width: 150, height: 150, onClick: handleSVClick, onMouseDown: handleSVClick, className: PixelEditor_module.hsvSVCanvas }), jsxRuntime.jsx("canvas", { ref: hueCanvasRef, width: 150, height: 16, onClick: handleHueClick, onMouseDown: handleHueClick, className: PixelEditor_module.hsvHueCanvas })] }));
};

exports.HSVPicker = HSVPicker;
//# sourceMappingURL=HSVPicker.js.map
