import React, { useEffect, useRef } from "react";
import { TransparencyLine, PointButton } from "./styles";
import { calculateChange } from "./helpers/calculateChange";
var Transparency = function (_a) {
    var colorRgb = _a.colorRgb, alpha = _a.alpha, setAlpha = _a.setAlpha;
    var container = useRef(null);
    var pointButtonRef = useRef(null);
    useEffect(function () { return function () { return unbindEventListeners(); }; }, []);
    var handleChange = function (e) {
        if (container.current && pointButtonRef.current) {
            setAlpha(calculateChange(e, container.current) + "%");
        }
    };
    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(TransparencyLine, { colorRgb: colorRgb, ref: container },
        React.createElement(PointButton, { ref: pointButtonRef, onMouseDown: handleMouseDown, alpha: alpha / 100, colorRgb: colorRgb })));
};
export default Transparency;
