"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPicker = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var core_1 = require("@blueprintjs/core");
var i18n_1 = require("../api/i18n");
var constants_1 = require("../constants");
var ol_style_contracts_1 = require("../api/ol-style-contracts");
var react_colorful_1 = require("react-colorful");
/**
 * A basic color picker component
 *
 * @since 0.13
 */
var ColorPicker = function (props) {
    var _a, _b;
    var _c = React.useState(false), isPickerOpen = _c[0], setIsPickerOpen = _c[1];
    var onPickerToggle = function () {
        setIsPickerOpen(!isPickerOpen);
    };
    return React.createElement("div", null,
        React.createElement("button", { disabled: props.disabled, style: { width: 80, borderRadius: 3, backgroundColor: (_a = props.value) !== null && _a !== void 0 ? _a : ol_style_contracts_1.DEFAULT_COLOR }, onClick: onPickerToggle },
            constants_1.NBSP,
            constants_1.NBSP,
            constants_1.NBSP),
        React.createElement(core_1.Collapse, { isOpen: isPickerOpen },
            React.createElement(core_1.Card, null,
                React.createElement(react_colorful_1.HexColorPicker, { style: { width: "100%" }, color: (_b = props.value) !== null && _b !== void 0 ? _b : ol_style_contracts_1.DEFAULT_COLOR, onChange: function (c) { return props.onChange(c); } }),
                React.createElement(core_1.Button, { icon: "chevron-up", intent: core_1.Intent.PRIMARY, onClick: function () { return setIsPickerOpen(false); } }, (0, i18n_1.tr)("ACTION_CLOSE", props.locale)))));
};
exports.ColorPicker = ColorPicker;
//# sourceMappingURL=color-picker.js.map