"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPicker = exports.Color = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var v_eris_1 = require("v-eris");
var colors_1 = require("../utility/colors");
require("./types.color.scss");
var Color = function (props) {
    var className = props.className, value = props.value, simple = props.simple, onClick = props.onClick, rest = tslib_1.__rest(props, ["className", "value", "simple", "onClick"]);
    return (react_1.default.createElement("div", { className: v_eris_1.Props.className("color", { simple: simple }), onClick: onClick, style: { cursor: onClick ? "pointer" : undefined } },
        react_1.default.createElement("div", { className: "color-bg", style: { backgroundColor: value } }),
        react_1.default.createElement("div", { className: "color-title" },
            "hex: ",
            value)));
};
exports.Color = Color;
var LerpVec3 = function (a, b, t) {
    return [
        (a[0] + (b[0] - a[0]) * t),
        (a[1] + (b[1] - a[1]) * t),
        (a[2] + (b[2] - a[2]) * t),
        1.0,
    ];
};
var ColorPicker = function (props) {
    var className = props.className, value = props.value, onChange = props.onChange, onClick = props.onClick, inactive = props.inactive, rest = tslib_1.__rest(props, ["className", "value", "onChange", "onClick", "inactive"]);
    var _a = (0, react_1.useState)(false), expanded = _a[0], setExpanded = _a[1];
    var drag = (0, react_1.useRef)({
        dragging: false,
        type: "gradient",
        offset: { x: 0, y: 0, hue: 0 }
    });
    var _b = (0, react_1.useState)({
        rgba: (0, colors_1.ParseColor)(value),
        hsva: (0, colors_1.RGBA2CoordHSVA)((0, colors_1.ParseColor)(value)),
    }), colors = _b[0], setColors = _b[1];
    (0, react_1.useEffect)(function () {
        var rgba = (0, colors_1.ParseColor)(value);
        var hsva = (0, colors_1.RGBA2CoordHSVA)(rgba);
        setColors({ rgba: rgba, hsva: hsva });
    }, [expanded]);
    var gradientRef = (0, react_1.useRef)(null);
    var hueRef = (0, react_1.useRef)(null);
    var alphaRef = (0, react_1.useRef)(null);
    var stopDragging = function (e) {
        if (!drag.current.dragging)
            return;
        drag.current.dragging = false;
    };
    var moveDragging = function (e) {
        if (!drag.current.dragging)
            return;
        var ref = drag.current.type == "hue" ? hueRef.current : (drag.current.type == "alpha" ? alphaRef.current : gradientRef.current);
        var offset = v_eris_1.Common.offset(ref);
        var x = v_eris_1.VMath.clamp(e.clientX - offset.x, 0, offset.width) / (offset.width * 1.0);
        var y = v_eris_1.VMath.clamp(e.clientY - offset.y, 0, offset.height) / (offset.height * 1.0);
        x = v_eris_1.VMath.clamp(x, 0.0, 1.0);
        y = v_eris_1.VMath.clamp(y, 0.0, 1.0);
        if (drag.current.type == "hue" && y >= 1.0)
            y = 0.9999;
        var hsva = drag.current.type == "hue" ?
            { h: y, s: colors.hsva.s, v: colors.hsva.v, a: colors.hsva.a }
            :
                (drag.current.type == "alpha" ?
                    { h: colors.hsva.h, s: colors.hsva.s, v: colors.hsva.v, a: v_eris_1.Common.float(x.toFixed(2)) }
                    :
                        { h: colors.hsva.h, s: x, v: 1.0 - y, a: colors.hsva.a });
        var rgba = (0, colors_1.CoordHSVA2RGBA)(hsva);
        setColors({ rgba: rgba, hsva: hsva });
        if (!onChange)
            return;
        onChange({ value: "rgba( " + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + " )" });
    };
    (0, react_1.useEffect)(function () {
        window.document.addEventListener("mouseup", stopDragging);
        return function () {
            window.document.removeEventListener("mouseup", stopDragging);
        };
    }, []);
    (0, react_1.useEffect)(function () {
        window.document.addEventListener("mousemove", moveDragging);
        return function () {
            window.document.removeEventListener("mousemove", moveDragging);
        };
    }, [colors, value, onChange]);
    var tooltip = (0, react_1.useMemo)(function () {
        var bg = "rgb( " + (colors.rgba.r) + ", " + (colors.rgba.g) + ", " + (colors.rgba.b) + " )";
        var x = colors.hsva.s;
        var y = 1.0 - colors.hsva.v;
        var hue = colors.hsva.h;
        var index = Math.floor(colors.hsva.h * 6.0);
        if (index > 5)
            index = 5;
        var it = (colors.hsva.h * 6.0) - index;
        var huecolors = [];
        if (index == 0)
            huecolors = LerpVec3([1.0, 0.0, 0.0, 1.0], [1.0, 1.0, 0.0, 1.0], it);
        else if (index == 1)
            huecolors = LerpVec3([1.0, 1.0, 0.0, 1.0], [0.0, 1.0, 0.0, 1.0], it);
        else if (index == 2)
            huecolors = LerpVec3([0.0, 1.0, 0.0, 1.0], [0.0, 1.0, 1.0, 1.0], it);
        else if (index == 3)
            huecolors = LerpVec3([0.0, 1.0, 1.0, 1.0], [0.0, 0.0, 1.0, 1.0], it);
        else if (index == 4)
            huecolors = LerpVec3([0.0, 0.0, 1.0, 1.0], [1.0, 0.0, 1.0, 1.0], it);
        else if (index == 5)
            huecolors = LerpVec3([1.0, 0.0, 1.0, 1.0], [1.0, 0.0, 0.0, 1.0], it);
        var gradient = "rgba( " + (huecolors[0] * 255.0) + ", " + (huecolors[1] * 255.0) + ", " + (huecolors[2] * 255.0) + ", " + huecolors[3] + " )";
        var r = 0;
        var g = 0;
        var b = 0;
        var a = colors.hsva.a;
        return (react_1.default.createElement("div", { className: "color-picker", onMouseDown: function (e) { e.stopPropagation(); } },
            react_1.default.createElement("div", { className: "color-picker-result", style: { backgroundColor: bg } }),
            react_1.default.createElement("div", { className: "color-picker-wrap" },
                react_1.default.createElement("div", { className: "color-picker-content" },
                    react_1.default.createElement("div", { className: "color-picker-gradient", style: { backgroundColor: gradient }, onMouseDown: function (e) {
                            if (inactive)
                                return;
                            drag.current.dragging = true;
                            drag.current.type = "gradient";
                            moveDragging(e);
                            //e.stopPropagation();
                        }, ref: gradientRef },
                        react_1.default.createElement("div", { className: "color-picker-gradient1" }),
                        react_1.default.createElement("div", { className: "color-picker-gradient2" }),
                        react_1.default.createElement("div", { className: "color-picker-gradient-target", style: { left: (x * 100.0) + "%", top: (y * 100.0) + "%" } }))),
                react_1.default.createElement("div", { className: "color-picker-hue", ref: hueRef, onMouseDown: function (e) {
                        if (inactive)
                            return;
                        drag.current.dragging = true;
                        drag.current.type = "hue";
                        moveDragging(e);
                        //e.stopPropagation();
                    } },
                    react_1.default.createElement("div", { className: "color-picker-hue-1" }),
                    react_1.default.createElement("div", { className: "color-picker-hue-2" }),
                    react_1.default.createElement("div", { className: "color-picker-hue-3" }),
                    react_1.default.createElement("div", { className: "color-picker-hue-4" }),
                    react_1.default.createElement("div", { className: "color-picker-hue-5" }),
                    react_1.default.createElement("div", { className: "color-picker-hue-6" }),
                    react_1.default.createElement("div", { className: "color-picker-hue-target", style: { top: (hue * 100.0) + "%" } }))),
            react_1.default.createElement("div", { className: "color-picker-alpha", ref: alphaRef, onMouseDown: function (e) {
                    if (inactive)
                        return;
                    drag.current.dragging = true;
                    drag.current.type = "alpha";
                    moveDragging(e);
                } },
                react_1.default.createElement("div", { className: "color-picker-alpha-overlay", style: { backgroundImage: "linear-gradient(270deg, " + bg + ", transparent)" } }),
                react_1.default.createElement("div", { className: "color-picker-alpha-target", style: { left: (a * 100.0) + "%" } }))));
    }, [expanded, colors, onChange]);
    return (react_1.default.createElement("div", null, inactive ? (react_1.default.createElement(exports.Color, { value: value }))
        :
            (react_1.default.createElement(v_eris_1.Modal, { className: "color-picker-modal", trigger: react_1.default.createElement(exports.Color, { value: value }), attach: true, margin: { y: 30 }, snap: { x: 0.5, y: 0.0 }, auto: false }, tooltip))));
};
exports.ColorPicker = ColorPicker;
//# sourceMappingURL=types.color.js.map