"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorExprEditor = exports.BooleanExprEditor = exports.StringExprEditor = exports.SliderExprEditor = exports.NumberExprEditor = exports.contrast = void 0;
var tslib_1 = require("tslib");
var core_1 = require("@blueprintjs/core");
var React = tslib_1.__importStar(require("react"));
var i18n_1 = require("../../api/i18n");
var ol_style_contracts_1 = require("../../api/ol-style-contracts");
var string_1 = require("../../utils/string");
var color_picker_1 = require("../color-picker");
function rgbToYIQ(_a) {
    var r = _a.r, g = _a.g, b = _a.b;
    return ((r * 299) + (g * 587) + (b * 114)) / 1000;
}
function hexToRgb(hex) {
    if (!hex || hex === undefined || hex === '') {
        return undefined;
    }
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : undefined;
}
function contrast(colorHex, threshold) {
    if (threshold === void 0) { threshold = 128; }
    if (colorHex === undefined) {
        return '#000';
    }
    var rgb = hexToRgb(colorHex);
    if (rgb === undefined) {
        return '#000';
    }
    return rgbToYIQ(rgb) >= threshold ? '#000' : '#fff';
}
exports.contrast = contrast;
function stringifyExpr(expr, locale) {
    if (!expr) {
        return (0, i18n_1.tr)("EXPR_NOT_SET", locale);
    }
    if ((0, ol_style_contracts_1.isEvaluatable)(expr)) {
        return "Expr: " + expr.expr;
    }
    return "".concat(expr !== null && expr !== void 0 ? expr : string_1.STR_EMPTY);
}
function isStrTrue(s) {
    switch (s === null || s === void 0 ? void 0 : s.toLowerCase()) {
        case "true":
        case "1":
            return true;
        case "false":
        case "0":
            return false;
    }
    return false;
}
function stringifyExprIf(expr, mode) {
    switch (mode) {
        case "edit-expr":
            return (0, ol_style_contracts_1.isEvaluatable)(expr) ? expr.expr : string_1.STR_EMPTY;
        case "edit-value":
            return (0, ol_style_contracts_1.isEvaluatable)(expr) ? string_1.STR_EMPTY : "".concat(expr !== null && expr !== void 0 ? expr : string_1.STR_EMPTY);
    }
}
function useExprEditor(props) {
    var value = props.value, onChange = props.onChange;
    var _a = React.useState((0, ol_style_contracts_1.isEvaluatable)(value) ? "edit-expr" : "edit-value"), editMode = _a[0], setEditMode = _a[1];
    var _b = React.useState(value), localValue = _b[0], setLocalValue = _b[1];
    var _c = React.useState(false), isEditing = _c[0], setIsEditing = _c[1];
    var _d = React.useState(false), isEditValid = _d[0], setIsEditValid = _d[1];
    React.useEffect(function () {
        setLocalValue(value);
    }, [value]);
    var onCancelEditing = React.useCallback(function () {
        setLocalValue(value);
        setIsEditing(false);
    }, [value]);
    var onApplyValue = function () {
        onChange(localValue);
        setIsEditing(false);
    };
    var onUpdateLocalValue = function (val) {
        try {
            setLocalValue(val);
            setIsEditValid(true);
        }
        catch (e) {
            setIsEditValid(false);
        }
    };
    return {
        editMode: editMode,
        localValue: localValue,
        isEditValid: isEditValid,
        isEditing: isEditing,
        setIsEditing: setIsEditing,
        setEditMode: setEditMode,
        setLocalValue: setLocalValue,
        onApplyValue: onApplyValue,
        onCancelEditing: onCancelEditing,
        onUpdateLocalValue: onUpdateLocalValue
    };
}
function ExprEditorInner(props) {
    var renderValueEditor = props.renderValueEditor, locale = props.locale, roStyle = props.roStyle;
    var _a = useExprEditor(props), isEditValid = _a.isEditValid, isEditing = _a.isEditing, localValue = _a.localValue, setIsEditing = _a.setIsEditing, editMode = _a.editMode, setEditMode = _a.setEditMode, onApplyValue = _a.onApplyValue, onCancelEditing = _a.onCancelEditing, onUpdateLocalValue = _a.onUpdateLocalValue;
    var onEditClick = function () {
        if (isEditing) {
            onCancelEditing();
        }
        else {
            setIsEditing(true);
        }
    };
    var editButton = React.createElement(core_1.Button, { icon: "edit", minimal: true, intent: core_1.Intent.PRIMARY, style: { color: "white", backgroundColor: "#137cbd" }, onClick: function (e) { return onEditClick(); } });
    return React.createElement(React.Fragment, null,
        React.createElement(core_1.InputGroup, { style: roStyle, readOnly: true, value: stringifyExpr(props.value, locale), rightElement: editButton }),
        React.createElement(core_1.Collapse, { isOpen: isEditing, keepChildrenMounted: false },
            React.createElement(core_1.Card, null,
                React.createElement("h5", { className: "bp3-heading" }, "Edit Value"),
                React.createElement(core_1.Radio, { name: "edit-mode", label: "Value", value: "edit-value", checked: editMode == "edit-value", onChange: function (e) { return setEditMode(e.target.value); } }),
                renderValueEditor(localValue, onUpdateLocalValue, locale, editMode != "edit-value"),
                React.createElement("br", null),
                React.createElement(core_1.Radio, { name: "edit-mode", label: "Expression", value: "edit-expr", checked: editMode == "edit-expr", onChange: function (e) { return setEditMode(e.target.value); } }),
                React.createElement("input", { disabled: editMode != "edit-expr", type: "text", className: "bp3-input", value: stringifyExprIf(localValue, "edit-expr"), onChange: function (e) { return onUpdateLocalValue({ expr: e.target.value }); } }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement(core_1.ButtonGroup, null,
                    React.createElement(core_1.Button, { disabled: !isEditValid, intent: core_1.Intent.SUCCESS, onClick: function (e) { return onApplyValue(); } }, "Apply"),
                    React.createElement(core_1.Button, { intent: core_1.Intent.DANGER, onClick: function (e) { return onCancelEditing(); } }, "Cancel")))));
}
var NumberExprEditor = function (props) {
    var min = props.min, max = props.max;
    return React.createElement(ExprEditorInner, { locale: props.locale, value: props.value, onChange: props.onChange, renderValueEditor: function (v, oc, loc, disabled) { return React.createElement(core_1.NumericInput, { disabled: disabled, min: min, max: max, value: parseInt(stringifyExprIf(v, "edit-value"), 10), onValueChange: function (e) { return oc(e); } }); } });
};
exports.NumberExprEditor = NumberExprEditor;
var SliderExprEditor = function (props) {
    var min = props.min, max = props.max, labelStepSize = props.labelStepSize;
    return React.createElement(ExprEditorInner, { locale: props.locale, value: props.value, onChange: props.onChange, renderValueEditor: function (v, oc, loc, disabled) { return React.createElement(core_1.Slider, { disabled: disabled, min: min, max: max, labelStepSize: labelStepSize, value: parseInt(stringifyExprIf(v, "edit-value"), 10), onChange: function (e) { return oc(e); } }); } });
};
exports.SliderExprEditor = SliderExprEditor;
var StringExprEditor = function (props) {
    return React.createElement(ExprEditorInner, { locale: props.locale, value: props.value, onChange: props.onChange, renderValueEditor: function (v, oc, loc, disabled) { return React.createElement("input", { disabled: disabled, type: "text", className: "bp3-input", value: stringifyExprIf(v, "edit-value"), onChange: function (e) { return oc(e.target.value); } }); } });
};
exports.StringExprEditor = StringExprEditor;
var BooleanExprEditor = function (props) {
    return React.createElement(ExprEditorInner, { locale: props.locale, value: props.value, onChange: props.onChange, renderValueEditor: function (v, oc, loc, disabled) { return React.createElement(core_1.Switch, { disabled: disabled, checked: isStrTrue(stringifyExprIf(v, "edit-value")), onChange: function (e) { return oc(e.target.checked); } }); } });
};
exports.BooleanExprEditor = BooleanExprEditor;
var ColorExprEditor = function (props) {
    var value = props.value;
    var roStyle;
    if (!(0, ol_style_contracts_1.isEvaluatable)(value) && !(0, string_1.strIsNullOrEmpty)(value)) {
        roStyle = {
            backgroundColor: value,
            color: contrast(value)
        };
    }
    return React.createElement(ExprEditorInner, { roStyle: roStyle, locale: props.locale, value: value, onChange: props.onChange, renderValueEditor: function (v, oc, loc, disabled) { return React.createElement(color_picker_1.ColorPicker, { locale: loc, value: stringifyExprIf(v, "edit-value"), onChange: function (e) { return oc(e); } }); } });
};
exports.ColorExprEditor = ColorExprEditor;
//# sourceMappingURL=common.js.map