import { __assign, __read, __rest } from "tslib";
import React, { useEffect, useRef, useState } from "react";
import { useOnClickOutside } from "../hooks/useOnClickOutside";
import { useResizeObserver } from "../hooks/useResizeObserver";
import ColorPicker from "../ColorPicker";
import convertStringToHexFormat from "../utils/convertStringToHexFormat";
import getPositions from "../helpers/getPosition";
import { ColorButton, InputColorComponent, InputColorWrapper, ColorPickerWrapper } from "./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 = __rest(props, ["placeholder", "color", "onChange", "isReadOnly", "isShowClearIcon", "isShowLabel", "isDisabled", "width", "size", "direction", "isInputColorPicker", "lastColors", "viewType"]);
    var _j = __read(useState(convertStringToHexFormat(color || "")), 2), value = _j[0], setValue = _j[1];
    var _k = __read(useState(false), 2), isColorPickerShown = _k[0], setColorPickerShown = _k[1];
    var colorWrapperRef = useRef(null);
    var colorPickerWrapperRef = useRef(null);
    var windowRef = useRef(document.body);
    var _l = __read(useState({ top: 0, left: 0 }), 2), windowSize = _l[0], setWindowSize = _l[1];
    var _m = __read(useState(0), 2), left = _m[0], setLeft = _m[1];
    var _o = __read(useState(0), 2), top = _o[0], setTop = _o[1];
    var optionalCallback = function (entry) {
        return setWindowSize({ top: entry.top, left: entry.left });
    };
    useOnClickOutside(colorWrapperRef, function () { return setColorPickerShown(false); });
    useResizeObserver(windowRef, optionalCallback);
    useEffect(function () {
        setValue(convertStringToHexFormat(color || ""));
    }, [color]);
    var handleChange = function (_e, newColor) {
        updateColor(newColor);
    };
    var updateColor = function (newColor) {
        if (!isReadOnly) {
            newColor = convertStringToHexFormat(newColor);
            setValue(newColor);
            onChange && onChange(newColor);
        }
    };
    var updatePosition = function () {
        var _a = getPositions(direction, colorPickerWrapperRef.current, colorWrapperRef.current), _left = _a.left, _top = _a.top;
        setLeft(_left);
        setTop(_top);
    };
    useEffect(function () {
        updatePosition();
    }, [isColorPickerShown, windowSize, direction]);
    return (React.createElement(InputColorWrapper, { ref: colorWrapperRef },
        React.createElement(InputColorComponent, __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.createElement(ColorButton, { onClick: function () {
                    return !isReadOnly &&
                        !isDisabled &&
                        setColorPickerShown(!isColorPickerShown);
                }, color: value }), placeholder: placeholder, isReadonly: isReadOnly, isDisabled: isDisabled }, otherProps)),
        isColorPickerShown && (React.createElement(ColorPickerWrapper, { ref: colorPickerWrapperRef, left: left, top: top },
            React.createElement(ColorPicker, { color: value, isInput: isInputColorPicker, lastColors: lastColors, onChange: function (_a) {
                    var _color = _a.color;
                    return updateColor(_color);
                } })))));
};
InputColor.displayName = "InputColor";
export default InputColor;
