import { __assign } from "tslib";
import React, { useEffect, useRef } from "react";
import { hsvToHex } from "../../../utils/colorConvectors/hsvToHex";
import { calculateChange } from "./helpers/calculateChange";
import { ColorLine, PointButton } from "./styles";
var Hue = function (_a) {
    var hsl = _a.hsl, hsv = _a.hsv, setHsl = _a.setHsl, setHsv = _a.setHsv, setColorInput = _a.setColorInput;
    var container = useRef(null);
    useEffect(function () { return function () { return unbindEventListeners(); }; }, []);
    var handleChange = function (e) {
        if (container.current) {
            var change = calculateChange(e, hsl, container.current);
            setHsl(change);
            var newHSV = __assign(__assign({}, hsv), { h: change.h });
            setHsv(newHSV);
            setColorInput(hsvToHex(newHSV).toUpperCase());
        }
    };
    var handleMouseDown = function (e) {
        handleChange(e);
        window.addEventListener("mousemove", handleChange);
        window.addEventListener("mouseup", handleMouseUp);
    };
    var handleMouseUp = function () {
        unbindEventListeners();
    };
    var unbindEventListeners = function () {
        window.removeEventListener("mousemove", handleChange);
        window.removeEventListener("mouseup", handleMouseUp);
    };
    return (React.createElement(ColorLine, { ref: container },
        React.createElement(PointButton, { onMouseDown: handleMouseDown, hue: hsl.h, left: Math.round(hsl.h) * 100 })));
};
export default Hue;
