(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", "../hooks/useOnClickOutside", "../hooks/useResizeObserver", "../ColorPicker", "../utils/convertStringToHexFormat", "../helpers/getPosition", "./styles"], 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 useOnClickOutside_1 = require("../hooks/useOnClickOutside");
    var useResizeObserver_1 = require("../hooks/useResizeObserver");
    var ColorPicker_1 = (0, tslib_1.__importDefault)(require("../ColorPicker"));
    var convertStringToHexFormat_1 = (0, tslib_1.__importDefault)(require("../utils/convertStringToHexFormat"));
    var getPosition_1 = (0, tslib_1.__importDefault)(require("../helpers/getPosition"));
    var styles_1 = require("./styles");
    var InputColor = function (props) {
        var _a = props.placeholder, placeholder = _a === void 0 ? "Код цвета" : _a, color = props.color, onChange = props.onChange, _b = props.isReadOnly, isReadOnly = _b === void 0 ? false : _b, _c = props.isShowClearIcon, isShowClearIcon = _c === void 0 ? false : _c, _d = props.isShowLabel, isShowLabel = _d === void 0 ? true : _d, isDisabled = props.isDisabled, width = props.width, size = props.size, _f = props.direction, direction = _f === void 0 ? "bottomLeft" : _f, _g = props.isInputColorPicker, isInputColorPicker = _g === void 0 ? false : _g, lastColors = props.lastColors, _h = props.viewType, viewType = _h === void 0 ? "round" : _h, otherProps = (0, tslib_1.__rest)(props, ["placeholder", "color", "onChange", "isReadOnly", "isShowClearIcon", "isShowLabel", "isDisabled", "width", "size", "direction", "isInputColorPicker", "lastColors", "viewType"]);
        var _j = (0, tslib_1.__read)((0, react_1.useState)((0, convertStringToHexFormat_1.default)(color || "")), 2), value = _j[0], setValue = _j[1];
        var _k = (0, tslib_1.__read)((0, react_1.useState)(false), 2), isColorPickerShown = _k[0], setColorPickerShown = _k[1];
        var colorWrapperRef = (0, react_1.useRef)(null);
        var colorPickerWrapperRef = (0, react_1.useRef)(null);
        var windowRef = (0, react_1.useRef)(document.body);
        var _l = (0, tslib_1.__read)((0, react_1.useState)({ top: 0, left: 0 }), 2), windowSize = _l[0], setWindowSize = _l[1];
        var _m = (0, tslib_1.__read)((0, react_1.useState)(0), 2), left = _m[0], setLeft = _m[1];
        var _o = (0, tslib_1.__read)((0, react_1.useState)(0), 2), top = _o[0], setTop = _o[1];
        var optionalCallback = function (entry) {
            return setWindowSize({ top: entry.top, left: entry.left });
        };
        (0, useOnClickOutside_1.useOnClickOutside)(colorWrapperRef, function () { return setColorPickerShown(false); });
        (0, useResizeObserver_1.useResizeObserver)(windowRef, optionalCallback);
        (0, react_1.useEffect)(function () {
            setValue((0, convertStringToHexFormat_1.default)(color || ""));
        }, [color]);
        var handleChange = function (_e, newColor) {
            updateColor(newColor);
        };
        var updateColor = function (newColor) {
            if (!isReadOnly) {
                newColor = (0, convertStringToHexFormat_1.default)(newColor);
                setValue(newColor);
                onChange && onChange(newColor);
            }
        };
        var updatePosition = function () {
            var _a = (0, getPosition_1.default)(direction, colorPickerWrapperRef.current, colorWrapperRef.current), _left = _a.left, _top = _a.top;
            setLeft(_left);
            setTop(_top);
        };
        (0, react_1.useEffect)(function () {
            updatePosition();
        }, [isColorPickerShown, windowSize, direction]);
        return (react_1.default.createElement(styles_1.InputColorWrapper, { ref: colorWrapperRef },
            react_1.default.createElement(styles_1.InputColorComponent, (0, tslib_1.__assign)({ isReadOnly: isReadOnly, value: value, isShowLabel: isShowLabel, isShowClearIcon: isShowClearIcon, width: width, size: size, viewType: viewType, onChange: function (e, _value) { return handleChange(e, _value); }, iconRight: react_1.default.createElement(styles_1.ColorButton, { onClick: function () {
                        return !isReadOnly &&
                            !isDisabled &&
                            setColorPickerShown(!isColorPickerShown);
                    }, color: value }), placeholder: placeholder, isReadonly: isReadOnly, isDisabled: isDisabled }, otherProps)),
            isColorPickerShown && (react_1.default.createElement(styles_1.ColorPickerWrapper, { ref: colorPickerWrapperRef, left: left, top: top },
                react_1.default.createElement(ColorPicker_1.default, { color: value, isInput: isInputColorPicker, lastColors: lastColors, onChange: function (_a) {
                        var _color = _a.color;
                        return updateColor(_color);
                    } })))));
    };
    InputColor.displayName = "InputColor";
    exports.default = InputColor;
});
