import { __assign, __read, __rest } from "tslib";
import React, { useEffect, useRef, useState, forwardRef } from "react";
import convertStringToHexFormat from "../utils/convertStringToHexFormat";
import Input from "../Input/index";
import useDebounce from "../hooks/useDebounce";
import { useStateProps } from "../hooks/useStateProps";
import { hexToHsv } from "../utils/colorConvectors/hexToHsv";
import { hexToHsl } from "../utils/colorConvectors/hexToHsl";
import { hsvToHex } from "../utils/colorConvectors/hsvToHex";
import { hsvToRgb } from "../utils/colorConvectors/hsvToRgb";
import { getValidAlpha } from "./helpers/getValidAlpha";
import { ColorPickerComponent, SelectedColor, UsedColors } from "./styles";
import SaturationBlock from "./components/Saturation";
import Hue from "./components/Hue";
import Transparency from "./components/Transparency";
var ColorPicker = 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 = __rest(props, ["id", "className", "color", "lastColors", "onChange", "colorKey", "isInput", "isTransparency", "alpha", "testId", "testIdInputColor", "testIdTransparency"]);
    var _g = __read(useStateProps(convertStringToHexFormat(color)), 2), colorInput = _g[0], setColorInput = _g[1];
    var previousColorHsl = useRef(hexToHsl(colorInput) || { h: 0, s: 0, l: 0 });
    var previousColorHsv = useRef(hexToHsv(colorInput) || { h: 0, s: 0, v: 0 });
    var _h = __read(useState(hexToHsv(colorInput) || previousColorHsv.current), 2), hsvState = _h[0], setHsv = _h[1];
    var _j = __read(useState(hexToHsl(colorInput) || previousColorHsl.current), 2), hslState = _j[0], setHsl = _j[1];
    var _k = __read(useStateProps(getValidAlpha(alpha * 100 + "%")), 2), alphaState = _k[0], setAlpha = _k[1];
    var onChangeDebounce = useDebounce(function () {
        if (!isTransparency) {
            return onChange({ color: colorInput });
        }
        return onChange({
            color: colorInput,
            alpha: Number.parseInt(alphaState, 10) / 100
        });
    }, 500);
    useEffect(function () {
        previousColorHsv.current = hsvState;
    }, [hsvState]);
    useEffect(function () {
        previousColorHsl.current = hslState;
    }, [hslState]);
    useEffect(function () {
        var _a;
        if (hsvToHex(hsvState).toUpperCase() !== color.toUpperCase()) {
            var hsv = hexToHsv(color);
            if (hsv) {
                var oldHsv = previousColorHsv.current;
                setHsv(hexToHsv(color) || oldHsv);
                if (oldHsv.v === hsv.v && oldHsv.s === hsv.s) {
                    setHsl(hexToHsl(color) || previousColorHsl.current);
                }
                else if (Math.round(hsv.h) === Math.round(((_a = hexToHsl(color)) === null || _a === void 0 ? void 0 : _a.h) || 0)) {
                    setHsl(hexToHsl(color) || previousColorHsl.current);
                }
            }
        }
    }, [color]);
    useEffect(function () {
        onChangeDebounce();
    }, [colorInput, alphaState]);
    var handleChangeColor = function (_e, value) {
        var hex = convertStringToHexFormat(value);
        updateColor(hex);
    };
    var handleChangeAlpha = function (_e, value) { return setAlpha(getValidAlpha(value)); };
    var updateColor = function (newColor) {
        setColorInput(newColor);
        setHsv(hexToHsv(newColor) || previousColorHsv.current);
        onChangeDebounce();
        setHsl(hexToHsl(newColor) || previousColorHsl.current);
    };
    var checkLastColor = function () {
        if (!lastColors) {
            return false;
        }
        return lastColors.length > 0;
    };
    return (React.createElement(ColorPickerComponent, __assign({ "data-testid": testId, id: id, className: className, isLastColors: checkLastColor(), isInput: isInput, ref: ref }, otherProps),
        React.createElement("div", null,
            React.createElement("div", null,
                !isInput && (React.createElement(SaturationBlock, { hsv: hsvState, hsl: hslState, setHsv: setHsv, setColorInput: setColorInput })),
                isInput && (!lastColors || (lastColors && lastColors.length > 0)) && (React.createElement("div", { className: "color-picker-row" },
                    React.createElement(SaturationBlock, { hsv: hsvState, hsl: hslState, setHsv: setHsv, setColorInput: setColorInput }),
                    React.createElement(SelectedColor, { hex: hsvToHex(hsvState) }))),
                React.createElement(Hue, { hsl: hslState, hsv: hsvState, setHsv: setHsv, setHsl: setHsl, setColorInput: setColorInput }),
                isTransparency && (React.createElement(Transparency, { colorRgb: hsvToRgb(hsvState), setAlpha: setAlpha, alpha: Number.parseInt(alphaState, 10) })),
                isInput && isTransparency && (React.createElement("div", { className: "color-picker-row" },
                    React.createElement(Input, { onChange: handleChangeColor, placeholder: "\u041A\u043E\u0434 \u0446\u0432\u0435\u0442\u0430", type: "text", value: colorInput, width: "100%", testId: testIdInputColor }),
                    React.createElement(Input, { placeholder: "100%", type: "text", value: alphaState, isShowClearIcon: false, isShowLabel: false, width: "80px", onChange: handleChangeAlpha, testId: testIdTransparency }))),
                isInput && !isTransparency && (React.createElement(Input, { 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.createElement(UsedColors, null,
                React.createElement(SelectedColor, { hex: hsvToHex(hsvState) }),
                React.createElement("div", { className: "used-colors-list" }, (lastColors.length > 8
                    ? lastColors.slice(0, 8)
                    : lastColors).map(function (usedColor, i) { return (React.createElement("button", { key: colorKey ? colorKey(i, usedColor) : usedColor, style: { backgroundColor: usedColor }, onClick: function () {
                        updateColor(usedColor.toUpperCase());
                    } })); })))))));
});
ColorPicker.displayName = "ColorPicker";
export default ColorPicker;
