"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPicker = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Input_1 = tslib_1.__importDefault(require("../Input"));
const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
exports.ColorPicker = React.forwardRef((props, ref) => {
    const ColorPalette = props.api.userInterfaceApi.getColorPalette();
    let { api, value, includeAlpha = true, ...restProps } = props;
    const optionsMap = ColorPalette.reduce((acc, colorItem) => ({ ...acc, [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem }), {});
    const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
        return (React.createElement("option", { key: x, value: x }, x));
    });
    const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
    const preparedValue = React.useMemo(() => {
        const color = (0, StyleHelper_1.getVariableColor)(value);
        return (0, tinycolor2_1.default)(color).toHexString();
    }, [value]);
    const preparedAlphaColor = React.useMemo(() => {
        const color = (0, StyleHelper_1.getVariableColor)(value);
        return [(0, tinycolor2_1.default)(color).setAlpha(0).toRgbString(), (0, tinycolor2_1.default)(color).setAlpha(1).toRgbString()];
    }, [value]);
    const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
    const alpha = (0, tinycolor2_1.default)(value).getAlpha();
    return (React.createElement(rebass_1.Flex, { className: 'ColorPicker' },
        React.createElement(Input_1.default, { ...restProps, mr: 2, onChange: (event) => {
                /**
                 * The value is not in the map when the color is not in the palette.
                 */
                const color = optionsMap[event.target.value] ?? event.target.value;
                props.onChange(color);
            }, value: preparedValue, ref: ref, type: "color", style: {
                width: 70,
                padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
            }, list: "ABcolorChoices", title: props.title }),
        ABcolorChoices,
        includeAlpha && (React.createElement(rebass_1.Flex, { alignItems: "center" },
            React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),
            React.createElement(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
                    const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
                    props.onChange(color);
                }, min: 0, max: 1, step: 0.01, type: "range" })))));
});
