(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "../utils/convertStringToHexFormat", "../Input/index", "../hooks/useDebounce", "../hooks/useStateProps", "../utils/colorConvectors/hexToHsv", "../utils/colorConvectors/hexToHsl", "../utils/colorConvectors/hsvToHex", "../utils/colorConvectors/hsvToRgb", "./helpers/getValidAlpha", "./styles", "./components/Saturation", "./components/Hue", "./components/Transparency"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var convertStringToHexFormat_1 = (0, tslib_1.__importDefault)(require("../utils/convertStringToHexFormat"));
    var index_1 = (0, tslib_1.__importDefault)(require("../Input/index"));
    var useDebounce_1 = (0, tslib_1.__importDefault)(require("../hooks/useDebounce"));
    var useStateProps_1 = require("../hooks/useStateProps");
    var hexToHsv_1 = require("../utils/colorConvectors/hexToHsv");
    var hexToHsl_1 = require("../utils/colorConvectors/hexToHsl");
    var hsvToHex_1 = require("../utils/colorConvectors/hsvToHex");
    var hsvToRgb_1 = require("../utils/colorConvectors/hsvToRgb");
    var getValidAlpha_1 = require("./helpers/getValidAlpha");
    var styles_1 = require("./styles");
    var Saturation_1 = (0, tslib_1.__importDefault)(require("./components/Saturation"));
    var Hue_1 = (0, tslib_1.__importDefault)(require("./components/Hue"));
    var Transparency_1 = (0, tslib_1.__importDefault)(require("./components/Transparency"));
    var ColorPicker = (0, react_1.forwardRef)(function (props, ref) {
        var id = props.id, className = props.className, color = props.color, lastColors = props.lastColors, _a = props.onChange, onChange = _a === void 0 ? function () {
            /* */
        } : _a, colorKey = props.colorKey, isInput = props.isInput, isTransparency = props.isTransparency, _b = props.alpha, alpha = _b === void 0 ? 1 : _b, _c = props.testId, testId = _c === void 0 ? "color-picker" : _c, _d = props.testIdInputColor, testIdInputColor = _d === void 0 ? "color-picker-input" : _d, _f = props.testIdTransparency, testIdTransparency = _f === void 0 ? "transparency-input" : _f, otherProps = (0, tslib_1.__rest)(props, ["id", "className", "color", "lastColors", "onChange", "colorKey", "isInput", "isTransparency", "alpha", "testId", "testIdInputColor", "testIdTransparency"]);
        var _g = (0, tslib_1.__read)((0, useStateProps_1.useStateProps)((0, convertStringToHexFormat_1.default)(color)), 2), colorInput = _g[0], setColorInput = _g[1];
        var previousColorHsl = (0, react_1.useRef)((0, hexToHsl_1.hexToHsl)(colorInput) || { h: 0, s: 0, l: 0 });
        var previousColorHsv = (0, react_1.useRef)((0, hexToHsv_1.hexToHsv)(colorInput) || { h: 0, s: 0, v: 0 });
        var _h = (0, tslib_1.__read)((0, react_1.useState)((0, hexToHsv_1.hexToHsv)(colorInput) || previousColorHsv.current), 2), hsvState = _h[0], setHsv = _h[1];
        var _j = (0, tslib_1.__read)((0, react_1.useState)((0, hexToHsl_1.hexToHsl)(colorInput) || previousColorHsl.current), 2), hslState = _j[0], setHsl = _j[1];
        var _k = (0, tslib_1.__read)((0, useStateProps_1.useStateProps)((0, getValidAlpha_1.getValidAlpha)(alpha * 100 + "%")), 2), alphaState = _k[0], setAlpha = _k[1];
        var onChangeDebounce = (0, useDebounce_1.default)(function () {
            if (!isTransparency) {
                return onChange({ color: colorInput });
            }
            return onChange({
                color: colorInput,
                alpha: Number.parseInt(alphaState, 10) / 100
            });
        }, 500);
        (0, react_1.useEffect)(function () {
            previousColorHsv.current = hsvState;
        }, [hsvState]);
        (0, react_1.useEffect)(function () {
            previousColorHsl.current = hslState;
        }, [hslState]);
        (0, react_1.useEffect)(function () {
            var _a;
            if ((0, hsvToHex_1.hsvToHex)(hsvState).toUpperCase() !== color.toUpperCase()) {
                var hsv = (0, hexToHsv_1.hexToHsv)(color);
                if (hsv) {
                    var oldHsv = previousColorHsv.current;
                    setHsv((0, hexToHsv_1.hexToHsv)(color) || oldHsv);
                    if (oldHsv.v === hsv.v && oldHsv.s === hsv.s) {
                        setHsl((0, hexToHsl_1.hexToHsl)(color) || previousColorHsl.current);
                    }
                    else if (Math.round(hsv.h) === Math.round(((_a = (0, hexToHsl_1.hexToHsl)(color)) === null || _a === void 0 ? void 0 : _a.h) || 0)) {
                        setHsl((0, hexToHsl_1.hexToHsl)(color) || previousColorHsl.current);
                    }
                }
            }
        }, [color]);
        (0, react_1.useEffect)(function () {
            onChangeDebounce();
        }, [colorInput, alphaState]);
        var handleChangeColor = function (_e, value) {
            var hex = (0, convertStringToHexFormat_1.default)(value);
            updateColor(hex);
        };
        var handleChangeAlpha = function (_e, value) { return setAlpha((0, getValidAlpha_1.getValidAlpha)(value)); };
        var updateColor = function (newColor) {
            setColorInput(newColor);
            setHsv((0, hexToHsv_1.hexToHsv)(newColor) || previousColorHsv.current);
            onChangeDebounce();
            setHsl((0, hexToHsl_1.hexToHsl)(newColor) || previousColorHsl.current);
        };
        var checkLastColor = function () {
            if (!lastColors) {
                return false;
            }
            return lastColors.length > 0;
        };
        return (react_1.default.createElement(styles_1.ColorPickerComponent, (0, tslib_1.__assign)({ "data-testid": testId, id: id, className: className, isLastColors: checkLastColor(), isInput: isInput, ref: ref }, otherProps),
            react_1.default.createElement("div", null,
                react_1.default.createElement("div", null,
                    !isInput && (react_1.default.createElement(Saturation_1.default, { hsv: hsvState, hsl: hslState, setHsv: setHsv, setColorInput: setColorInput })),
                    isInput && (!lastColors || (lastColors && lastColors.length > 0)) && (react_1.default.createElement("div", { className: "color-picker-row" },
                        react_1.default.createElement(Saturation_1.default, { hsv: hsvState, hsl: hslState, setHsv: setHsv, setColorInput: setColorInput }),
                        react_1.default.createElement(styles_1.SelectedColor, { hex: (0, hsvToHex_1.hsvToHex)(hsvState) }))),
                    react_1.default.createElement(Hue_1.default, { hsl: hslState, hsv: hsvState, setHsv: setHsv, setHsl: setHsl, setColorInput: setColorInput }),
                    isTransparency && (react_1.default.createElement(Transparency_1.default, { colorRgb: (0, hsvToRgb_1.hsvToRgb)(hsvState), setAlpha: setAlpha, alpha: Number.parseInt(alphaState, 10) })),
                    isInput && isTransparency && (react_1.default.createElement("div", { className: "color-picker-row" },
                        react_1.default.createElement(index_1.default, { onChange: handleChangeColor, placeholder: "\u041A\u043E\u0434 \u0446\u0432\u0435\u0442\u0430", type: "text", value: colorInput, width: "100%", testId: testIdInputColor }),
                        react_1.default.createElement(index_1.default, { placeholder: "100%", type: "text", value: alphaState, isShowClearIcon: false, isShowLabel: false, width: "80px", onChange: handleChangeAlpha, testId: testIdTransparency }))),
                    isInput && !isTransparency && (react_1.default.createElement(index_1.default, { onChange: handleChangeColor, placeholder: "\u041A\u043E\u0434 \u0446\u0432\u0435\u0442\u0430", type: "text", value: colorInput, width: "100%", testId: testIdInputColor }))),
                !isInput && lastColors && lastColors.length > 0 && (react_1.default.createElement(styles_1.UsedColors, null,
                    react_1.default.createElement(styles_1.SelectedColor, { hex: (0, hsvToHex_1.hsvToHex)(hsvState) }),
                    react_1.default.createElement("div", { className: "used-colors-list" }, (lastColors.length > 8
                        ? lastColors.slice(0, 8)
                        : lastColors).map(function (usedColor, i) { return (react_1.default.createElement("button", { key: colorKey ? colorKey(i, usedColor) : usedColor, style: { backgroundColor: usedColor }, onClick: function () {
                            updateColor(usedColor.toUpperCase());
                        } })); })))))));
    });
    ColorPicker.displayName = "ColorPicker";
    exports.default = ColorPicker;
});
