import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2007-2025 GoodData Corporation
/**
 * Copyright (c) 2015 Case Sandberg
 * Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
 */
import { memo, useCallback, useEffect, useMemo, useRef, } from "react";
import { calculateHueChange } from "../utils.js";
export const HueColorPicker = memo(function HueColorPicker({ initColor, onChange }) {
    const hueContainer = useRef(null);
    const pointerStyle = useMemo(() => ({
        position: "absolute",
        left: `${(initColor.h * 100) / 360}%`,
    }), [initColor.h]);
    const handleChange = useCallback((e) => {
        if (!hueContainer.current) {
            return;
        }
        const change = calculateHueChange(e, initColor.h, hueContainer.current);
        if (change && onChange) {
            onChange(change);
        }
    }, [initColor.h, onChange]);
    const handleMouseUp = useCallback(() => {
        window.removeEventListener("mousemove", handleChange);
        window.removeEventListener("mouseup", handleMouseUp);
    }, [handleChange]);
    const bindEventListeners = useCallback(() => {
        window.addEventListener("mousemove", handleChange);
        window.addEventListener("mouseup", handleMouseUp);
    }, [handleChange, handleMouseUp]);
    const handleTouchChange = useCallback((e) => {
        handleChange(e.nativeEvent);
    }, [handleChange]);
    const handleMouseDown = useCallback((e) => {
        bindEventListeners();
        handleChange(e.nativeEvent);
    }, [bindEventListeners, handleChange]);
    useEffect(() => {
        return () => {
            window.removeEventListener("mousemove", handleChange);
            window.removeEventListener("mouseup", handleMouseUp);
        };
    }, [handleChange, handleMouseUp]);
    return (_jsx("div", { role: "hue-picker", className: "hue-picker hue-horizontal s-hue-picker", ref: hueContainer, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchMove: handleTouchChange, onTouchStart: handleTouchChange, children: _jsx("div", { style: pointerStyle, children: _jsx("div", { className: "color-picker-pointer s-color-picker-pointer" }) }) }));
});
