"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VectorLayerStyleEditor = exports.VectorStyleEditor = 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 ol_style_contracts_1 = require("../api/ol-style-contracts");
var ol_style_helpers_1 = require("../api/ol-style-helpers");
var expr_eval_1 = require("expr-eval");
var common_1 = require("./layer-manager/common");
var string_1 = require("../utils/string");
var legend_1 = require("./layer-manager/legend");
var ol_style_map_set_1 = require("../api/ol-style-map-set");
function assertValue(val) {
    if ((0, ol_style_contracts_1.isEvaluatable)(val))
        throw new Error("Value is expression instead of a raw value");
}
function ExprEditor(props) {
    assertValue(props.expr);
    return React.createElement(React.Fragment, null,
        "Expr: ",
        React.createElement("input", { type: "text", value: "".concat(props.expr), onChange: function (e) { return props.onExprChanged(props.converter(e.target.value)); } }));
}
var DynamicSwitch = function (props) {
    if ((0, ol_style_contracts_1.isEvaluatable)(props.expr)) {
        return React.createElement(ExprEditor, tslib_1.__assign({}, props, { converter: function (v) { return (v === null || v === void 0 ? void 0 : v.toLowerCase()) == "true"; } }));
    }
    else {
        var expr = props.expr, onExprChanged = props.onExprChanged, rest = tslib_1.__rest(props, ["expr", "onExprChanged"]);
        var innerProps = tslib_1.__assign(tslib_1.__assign({}, rest), { checked: props.expr, onChange: function (e) { return props.onExprChanged(e.target.checked); } });
        return React.createElement(core_1.Switch, tslib_1.__assign({}, innerProps));
    }
};
//TODO: Either surface the font as another editable property or offload to configuration
var buildFont = function (size, bold, italic, font) {
    if (font === void 0) { font = "sans-serif"; }
    return "".concat(bold ? "bold" : string_1.STR_EMPTY, " ").concat(italic ? "italic" : string_1.STR_EMPTY, " ").concat(size, "px ").concat(font);
};
function coalesceExpr(expr, defaultVal) {
    if ((0, ol_style_contracts_1.isEvaluatable)(expr)) {
        return defaultVal;
    }
    return expr !== null && expr !== void 0 ? expr : defaultVal;
}
var DEFAULT_FONT_SIZE = 14;
var LabelStyleEditor = function (props) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    var style = props.style, locale = props.locale, onChange = props.onChange, isLine = props.isLine;
    var _o = React.useState(false), bold = _o[0], setBold = _o[1];
    var _p = React.useState(false), italic = _p[0], setItalic = _p[1];
    var _q = React.useState((_c = (_b = (_a = style.label) === null || _a === void 0 ? void 0 : _a.fill) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : "#000000"), localBgColor = _q[0], setLocalBgColor = _q[1];
    var _r = React.useState((_f = (_e = (_d = style.label) === null || _d === void 0 ? void 0 : _d.fill) === null || _e === void 0 ? void 0 : _e.alpha) !== null && _f !== void 0 ? _f : 255), localBgColorAlpha = _r[0], setLocalColorAlpha = _r[1];
    var _s = React.useState((_j = (_h = (_g = style.label) === null || _g === void 0 ? void 0 : _g.stroke) === null || _h === void 0 ? void 0 : _h.color) !== null && _j !== void 0 ? _j : "#ffffff"), localStrokeColor = _s[0], setLocalStrokeColor = _s[1];
    var _t = React.useState((_m = (_l = (_k = style.label) === null || _k === void 0 ? void 0 : _k.stroke) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : 1), localStrokeWidth = _t[0], setLocalStrokeWidth = _t[1];
    var _u = React.useState(DEFAULT_FONT_SIZE), localFontSize = _u[0], setLocalFontSize = _u[1];
    var _v = React.useState(tslib_1.__assign({ font: buildFont(localFontSize, bold, italic) }, style.label)), localLabel = _v[0], setLocalLabel = _v[1];
    var _w = React.useState(style.label != null), hasLabel = _w[0], setHasLabel = _w[1];
    var onToggleLinePlacement = React.useCallback(function () {
        if (localLabel.placement == "line") {
            var placement = localLabel.placement, rest = tslib_1.__rest(localLabel, ["placement"]);
            setLocalLabel(rest);
        }
        else {
            setLocalLabel(tslib_1.__assign(tslib_1.__assign({}, localLabel), { placement: "line" }));
        }
    }, [localLabel]);
    React.useEffect(function () {
        if (hasLabel) {
            onChange(tslib_1.__assign(tslib_1.__assign({}, style), { label: localLabel }));
        }
        else {
            var label = style.label, rest = tslib_1.__rest(style, ["label"]);
            onChange(rest);
        }
    }, [localLabel, hasLabel]);
    React.useEffect(function () {
        setLocalLabel(tslib_1.__assign(tslib_1.__assign({}, localLabel), { font: buildFont(localFontSize, bold, italic) }));
    }, [localFontSize, bold, italic]);
    React.useEffect(function () {
        setLocalLabel(tslib_1.__assign(tslib_1.__assign({}, localLabel), { fill: tslib_1.__assign(tslib_1.__assign({}, localLabel.fill), { color: localBgColor, alpha: localBgColorAlpha }), stroke: tslib_1.__assign(tslib_1.__assign({}, localLabel.stroke), { color: localStrokeColor, width: localStrokeWidth }) }));
    }, [localStrokeColor, localStrokeWidth, localBgColorAlpha, localBgColor]);
    return React.createElement(React.Fragment, null,
        React.createElement(core_1.Switch, { checked: hasLabel, onChange: function (e) { return setHasLabel(e.target.checked); }, label: (0, i18n_1.tr)("ENABLE_LABELS", locale) }),
        hasLabel && React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LABEL_TEXT", locale) },
            React.createElement(common_1.StringExprEditor, { locale: locale, value: localLabel.text, onChange: function (t) { return setLocalLabel(tslib_1.__assign(tslib_1.__assign({}, localLabel), { text: t })); } })),
        hasLabel && React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LABEL_SIZE", locale) },
            React.createElement(common_1.NumberExprEditor, { locale: locale, value: localFontSize, onChange: function (t) { return setLocalFontSize(coalesceExpr(t, DEFAULT_FONT_SIZE)); } })),
        hasLabel && React.createElement(core_1.ButtonGroup, null,
            React.createElement(core_1.Button, { intent: core_1.Intent.PRIMARY, active: bold, onClick: function (e) { return setBold(!bold); } }, (0, i18n_1.tr)("LABEL_BOLD", locale)),
            React.createElement(core_1.Button, { intent: core_1.Intent.PRIMARY, active: italic, onClick: function (e) { return setItalic(!italic); } }, (0, i18n_1.tr)("LABEL_ITALIC", locale)),
            isLine && React.createElement(core_1.Button, { intent: core_1.Intent.PRIMARY, active: localLabel.placement == "line", onClick: function (e) { return onToggleLinePlacement(); } }, (0, i18n_1.tr)("LABEL_LINE_PLACEMENT", locale))),
        hasLabel && React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LABEL_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: localBgColor, onChange: function (c) { return setLocalBgColor(c); } })),
        hasLabel && React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LABEL_OUTLINE_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: localStrokeColor, onChange: function (c) { return setLocalStrokeColor(c); } })),
        hasLabel && React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LABEL_OUTLINE_THICKNESS", locale) },
            React.createElement(common_1.NumberExprEditor, { locale: locale, value: localStrokeWidth, onChange: function (t) { return setLocalStrokeWidth(t); } })));
};
var PointIconStyleEditor = function (_a) {
    var style = _a.style, onChange = _a.onChange, locale = _a.locale;
    var _b = React.useState(style.src), localSrc = _b[0], setLocalSrc = _b[1];
    React.useEffect(function () {
        setLocalSrc(style.src);
    }, [style.src]);
    var onSrcChange = function (e) {
        onChange(tslib_1.__assign(tslib_1.__assign({}, style), { src: localSrc }));
    };
    return React.createElement("div", null,
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_ICON_SRC", locale) },
            React.createElement(common_1.StringExprEditor, { value: localSrc, onChange: function (e) { return setLocalSrc(e); }, locale: locale }),
            !(0, ol_style_contracts_1.isEvaluatable)(style.src) && React.createElement("img", { src: style.src })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_ICON_ANCHOR", locale) },
            (0, i18n_1.tr)("VSED_PT_ICON_ANCHOR_H", locale),
            " ",
            React.createElement(core_1.NumericInput, { value: style.anchor[0], min: 0, onValueChange: function (e) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { anchor: [e, style.anchor[1]] })); } }),
            (0, i18n_1.tr)("VSED_PT_ICON_ANCHOR_V", locale),
            " ",
            React.createElement(core_1.NumericInput, { value: style.anchor[1], min: 0, onValueChange: function (e) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { anchor: [style.anchor[0], e] })); } })),
        React.createElement(DynamicSwitch, { label: (0, i18n_1.tr)("VSED_PT_ICON_ROTATE_WITH_VIEW", locale), expr: style.rotateWithView, onExprChanged: function (e) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { rotateWithView: e })); } }),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_ICON_ROTATION", locale) },
            React.createElement(common_1.SliderExprEditor, { locale: locale, min: 0, max: 360, labelStepSize: 360, value: style.rotation, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { rotation: n })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_ICON_SCALE", locale) },
            React.createElement(common_1.NumberExprEditor, { value: style.scale, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { scale: n })); }, locale: locale })));
};
var PointCircleStyleEditor = function (_a) {
    var style = _a.style, onChange = _a.onChange, locale = _a.locale;
    return React.createElement("div", null,
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_FILL_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: style.fill.color, onChange: function (c) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { fill: { color: c, alpha: style.fill.alpha } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_FILL_COLOR_ALPHA", locale) },
            React.createElement(common_1.SliderExprEditor, { locale: locale, min: 0, max: 255, labelStepSize: 255, value: style.fill.alpha, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { fill: { color: style.fill.color, alpha: n } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_RADIUS", locale) },
            React.createElement(common_1.NumberExprEditor, { locale: locale, value: style.radius, min: 1, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { radius: n })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_OUTLINE_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: style.stroke.color, onChange: function (c) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { stroke: { color: c, width: style.stroke.width, alpha: style.stroke.alpha } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_OUTLINE_COLOR_ALPHA", locale) },
            React.createElement(common_1.SliderExprEditor, { locale: locale, min: 0, max: 255, labelStepSize: 255, value: style.stroke.alpha, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { stroke: { color: style.stroke.color, width: style.stroke.width, alpha: n } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PT_OUTLINE_WIDTH", locale) },
            React.createElement(common_1.NumberExprEditor, { locale: locale, value: style.stroke.width, min: 1, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { stroke: { color: style.stroke.color, width: n, alpha: style.stroke.alpha } })); } })));
};
var PointStyleEditor = function (_a) {
    var style = _a.style, onChange = _a.onChange, locale = _a.locale;
    var _b = React.useState(undefined), iconStyle = _b[0], setIconStyle = _b[1];
    var _c = React.useState(undefined), circleStyle = _c[0], setCircleStyle = _c[1];
    var _d = React.useState(style), currentStyle = _d[0], setCurrentStyle = _d[1];
    var applyCurrentStyle = function (s) {
        setCurrentStyle(s);
        switch (s.type) {
            case "Circle":
                setCircleStyle(s);
                break;
            case "Icon":
                setIconStyle(s);
                break;
        }
    };
    var onStyleTypeChange = function (type) {
        switch (type) {
            case "Circle":
                if (circleStyle) {
                    setCurrentStyle(circleStyle);
                    onChange(circleStyle);
                }
                else {
                    var s = tslib_1.__assign({}, ol_style_contracts_1.DEFAULT_POINT_CIRCLE_STYLE);
                    setCircleStyle(s);
                    setCurrentStyle(s);
                    onChange(s);
                }
                break;
            case "Icon":
                if (iconStyle) {
                    setCurrentStyle(iconStyle);
                    onChange(iconStyle);
                }
                else {
                    var s = tslib_1.__assign({}, ol_style_contracts_1.DEFAULT_POINT_ICON_STYLE);
                    setIconStyle(s);
                    setCurrentStyle(s);
                    onChange(s);
                }
                break;
        }
    };
    React.useEffect(function () {
        applyCurrentStyle(style);
    }, [style]);
    return React.createElement("div", null,
        React.createElement(core_1.RadioGroup, { inline: true, label: (0, i18n_1.tr)("VSED_PT_TYPE", locale), onChange: function (e) { return onStyleTypeChange(e.target.value); }, selectedValue: currentStyle.type },
            React.createElement(core_1.Radio, { label: (0, i18n_1.tr)("VSED_PT_TYPE_CIRCLE", locale), value: "Circle" }),
            React.createElement(core_1.Radio, { label: (0, i18n_1.tr)("VSED_PT_TYPE_ICON", locale), value: "Icon" })),
        currentStyle.type == "Icon" && React.createElement(PointIconStyleEditor, { style: currentStyle, onChange: onChange, locale: locale }),
        currentStyle.type == "Circle" && React.createElement(PointCircleStyleEditor, { style: currentStyle, onChange: onChange, locale: locale }),
        React.createElement(LabelStyleEditor, { style: currentStyle, locale: locale, onChange: onChange }));
};
var LineStyleEditor = function (_a) {
    var style = _a.style, onChange = _a.onChange, locale = _a.locale;
    return React.createElement("div", null,
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_LN_OUTLINE_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: style.color, onChange: function (c) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { color: c, width: style.width, alpha: style.alpha })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_LN_OUTLINE_COLOR_ALPHA", locale) },
            React.createElement(common_1.SliderExprEditor, { locale: locale, min: 0, max: 255, labelStepSize: 255, value: style.alpha, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { color: style.color, width: style.width, alpha: n })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_LN_OUTLINE_THICKNESS", locale) },
            React.createElement(common_1.NumberExprEditor, { locale: locale, min: 1, value: style.width, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { color: style.color, width: n, alpha: style.alpha })); } })),
        React.createElement(LabelStyleEditor, { style: style, locale: locale, onChange: onChange, isLine: true }));
};
var PolygonStyleEditor = function (_a) {
    var style = _a.style, onChange = _a.onChange, locale = _a.locale;
    return React.createElement("div", null,
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PL_FILL_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: style.fill.color, onChange: function (c) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { fill: { color: c, alpha: style.fill.alpha } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PL_FILL_COLOR_ALPHA", locale) },
            React.createElement(common_1.SliderExprEditor, { locale: locale, min: 0, max: 255, labelStepSize: 255, value: style.fill.alpha, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { fill: { color: style.fill.color, alpha: n } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PL_OUTLINE_COLOR", locale) },
            React.createElement(common_1.ColorExprEditor, { locale: locale, value: style.stroke.color, onChange: function (c) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { stroke: { color: c, width: style.stroke.width, alpha: style.stroke.alpha } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PL_OUTLINE_COLOR_ALPHA", locale) },
            React.createElement(common_1.SliderExprEditor, { locale: locale, min: 0, max: 255, labelStepSize: 255, value: style.stroke.alpha, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { stroke: { color: style.stroke.color, width: style.stroke.width, alpha: n } })); } })),
        React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("VSED_PL_OUTLINE_THICKNESS", locale) },
            React.createElement(common_1.NumberExprEditor, { locale: locale, value: style.stroke.width, min: 1, onChange: function (n) { return onChange(tslib_1.__assign(tslib_1.__assign({}, style), { stroke: { color: style.stroke.color, width: n, alpha: style.stroke.alpha } })); } })),
        React.createElement(LabelStyleEditor, { style: style, locale: locale, onChange: onChange }));
};
/**
 * A vector style editor component
 *
 * @since 0.13
 */
var VectorStyleEditor = function (props) {
    var _a, _b, _c;
    var locale = props.locale, style = props.style, onChange = props.onChange, enableLine = props.enableLine, enablePoint = props.enablePoint, enablePolygon = props.enablePolygon;
    var _d = React.useState(undefined), selectedTab = _d[0], setSelectedTab = _d[1];
    var _e = React.useState((_a = style === null || style === void 0 ? void 0 : style.point) !== null && _a !== void 0 ? _a : ol_style_contracts_1.DEFAULT_POINT_CIRCLE_STYLE), pointStyle = _e[0], setPointStyle = _e[1];
    var _f = React.useState((_b = style === null || style === void 0 ? void 0 : style.line) !== null && _b !== void 0 ? _b : ol_style_contracts_1.DEFAULT_LINE_STYLE), lineStyle = _f[0], setLineStyle = _f[1];
    var _g = React.useState((_c = style === null || style === void 0 ? void 0 : style.polygon) !== null && _c !== void 0 ? _c : ol_style_contracts_1.DEFAULT_POLY_STYLE), polyStyle = _g[0], setPolyStyle = _g[1];
    React.useEffect(function () {
        var _a, _b, _c;
        setPointStyle((_a = style === null || style === void 0 ? void 0 : style.point) !== null && _a !== void 0 ? _a : ol_style_contracts_1.DEFAULT_POINT_CIRCLE_STYLE);
        setLineStyle((_b = style === null || style === void 0 ? void 0 : style.line) !== null && _b !== void 0 ? _b : ol_style_contracts_1.DEFAULT_LINE_STYLE);
        setPolyStyle((_c = style === null || style === void 0 ? void 0 : style.polygon) !== null && _c !== void 0 ? _c : ol_style_contracts_1.DEFAULT_POLY_STYLE);
    }, [style]);
    var onStyleChanged = function (point, line, poly) {
        var newStyle = {
            label: style === null || style === void 0 ? void 0 : style.label
        };
        if (enablePoint) {
            newStyle.point = point;
        }
        if (enableLine) {
            newStyle.line = line;
        }
        if (enablePolygon) {
            newStyle.polygon = poly;
        }
        onChange === null || onChange === void 0 ? void 0 : onChange(newStyle);
        if (newStyle.point) {
            setPointStyle(newStyle.point);
        }
        if (newStyle.line) {
            setLineStyle(newStyle.line);
        }
        if (newStyle.polygon) {
            setPolyStyle(newStyle.polygon);
        }
    };
    if (!enableLine && !enablePoint && !enablePolygon) {
        return React.createElement(core_1.NonIdealState, { icon: "warning-sign", title: (0, i18n_1.tr)("VSED_NO_STYLES_TITLE", locale), description: (0, i18n_1.tr)("VSED_NO_STYLES_DESC", locale) });
    }
    else {
        var onPointStyleChanged = function (st) {
            onStyleChanged(st, lineStyle, polyStyle);
        };
        var onLineStyleChanged = function (st) {
            onStyleChanged(pointStyle, st, polyStyle);
        };
        var onPolygonStyleChanged = function (st) {
            onStyleChanged(pointStyle, lineStyle, st);
        };
        return React.createElement(core_1.Tabs, { onChange: function (t) { return setSelectedTab(t); }, selectedTabId: selectedTab },
            enablePoint && React.createElement(core_1.Tab, { id: "pointStyle", title: (0, i18n_1.tr)("VSED_TAB_POINT", locale), panel: React.createElement(PointStyleEditor, { style: pointStyle, locale: locale, onChange: onPointStyleChanged }) }),
            enableLine && React.createElement(core_1.Tab, { id: "lineStyle", title: (0, i18n_1.tr)("VSED_TAB_LINE", locale), panel: React.createElement(LineStyleEditor, { style: lineStyle, locale: locale, onChange: onLineStyleChanged }) }),
            enablePolygon && React.createElement(core_1.Tab, { id: "polyStyle", title: (0, i18n_1.tr)("VSED_TAB_POLY", locale), panel: React.createElement(PolygonStyleEditor, { style: polyStyle, locale: locale, onChange: onPolygonStyleChanged }) }));
    }
};
exports.VectorStyleEditor = VectorStyleEditor;
var parser = new expr_eval_1.Parser();
var FilterItem = function (props) {
    var filter = props.filter, isDefault = props.isDefault, isStyleEditorOpen = props.isStyleEditorOpen, featureStyle = props.featureStyle, onChange = props.onChange;
    var _a = React.useState(filter !== null && filter !== void 0 ? filter : ""), localFilter = _a[0], setLocalFilter = _a[1];
    var _b = React.useState(true), isLocalFilterValid = _b[0], setIsLocalFilterValid = _b[1];
    var _c = React.useState(undefined), pointStyleUrl = _c[0], setPointStyleUrl = _c[1];
    var _d = React.useState(undefined), lineStyleUrl = _d[0], setLineStyleUrl = _d[1];
    var _e = React.useState(undefined), polyStyleUrl = _e[0], setPolyStyleUrl = _e[1];
    React.useEffect(function () {
        setLocalFilter(localFilter);
    }, [filter]);
    React.useEffect(function () {
        try {
            var expr = parser.parse(localFilter);
            var bHaveVar = false;
            var bHaveOperator = false;
            for (var _i = 0, _a = expr.tokens; _i < _a.length; _i++) {
                var t = _a[_i];
                switch (t.type) {
                    case "IVAR":
                        bHaveVar = true;
                        break;
                    case "IOP2":
                        bHaveOperator = true;
                        break;
                }
            }
            setIsLocalFilterValid(bHaveVar && bHaveOperator && expr.tokens.length == 3);
        }
        catch (e) {
            setIsLocalFilterValid(false);
        }
    }, [localFilter]);
    React.useEffect(function () {
        var _a, _b;
        var fs = featureStyle;
        // A default clustered style will have a dynamic expression for the radius, the legend preview isn't
        // smart enough to know what this should be since we don't (and can't) pass an "example" feature to
        // know what this value should be. So in the event we find a clustered point style, we'll replace
        // the dynamic radius expression with a constant value
        if (((_a = featureStyle === null || featureStyle === void 0 ? void 0 : featureStyle.point) === null || _a === void 0 ? void 0 : _a.type) == "Circle" && (0, ol_style_contracts_1.isEvaluatable)(featureStyle.point.radius)) {
            fs = JSON.parse(JSON.stringify(featureStyle));
            if (((_b = fs.point) === null || _b === void 0 ? void 0 : _b.type) == "Circle") {
                fs.point.radius = 5;
            }
        }
        var olstyle = (0, ol_style_map_set_1.vectorStyleToStyleMap)(fs);
        var pos;
        var ls;
        var pls;
        if (typeof (olstyle) == 'function') {
            pos = function (feat) { return olstyle(feat, undefined)["Point"]; };
            ls = function (feat) { return olstyle(feat, undefined)["LineString"]; };
            pls = function (feat) { return olstyle(feat, undefined)["Polygon"]; };
        }
        else {
            pos = olstyle.Point;
            ls = olstyle.LineString;
            pls = olstyle.Polygon;
        }
        var cPoint = (0, legend_1.getLegendImage)({
            typeGeom: "Point",
            style: pos
        });
        var cLineString = (0, legend_1.getLegendImage)({
            typeGeom: "LineString",
            style: ls
        });
        var cPolygon = (0, legend_1.getLegendImage)({
            typeGeom: "Polygon",
            style: pls
        });
        setPointStyleUrl(cPoint.toDataURL());
        setLineStyleUrl(cLineString.toDataURL());
        setPolyStyleUrl(cPolygon.toDataURL());
    }, [featureStyle]);
    var onToggle = function () {
        props.onToggleStyleEditor(!isStyleEditorOpen);
    };
    var onInnerStyleChanged = function (style) {
        onChange === null || onChange === void 0 ? void 0 : onChange(isDefault ? ol_style_helpers_1.DEFAULT_STYLE_KEY : localFilter, style);
    };
    var outerModifier;
    if (!isLocalFilterValid) {
        outerModifier = core_1.Intent.DANGER;
    }
    var colSpan = 5;
    if (!props.enableLine)
        colSpan--;
    if (!props.enablePoint)
        colSpan--;
    if (!props.enablePolygon)
        colSpan--;
    var filterExprEd = React.createElement("span", null, featureStyle.label); //<InputGroup intent={outerModifier} fill leftIcon={(isLocalFilterValid ? "tick" : "warning-sign")} title={localFilter} value={localFilter} onChange={e => setLocalFilter(e.target.value)} />;
    return React.createElement(React.Fragment, null,
        React.createElement("tr", null,
            props.enablePoint && React.createElement("td", null, pointStyleUrl && React.createElement("img", { src: pointStyleUrl })),
            props.enableLine && React.createElement("td", null, lineStyleUrl && React.createElement("img", { src: lineStyleUrl })),
            props.enablePolygon && React.createElement("td", null, polyStyleUrl && React.createElement("img", { src: polyStyleUrl })),
            React.createElement("td", null, isDefault ? React.createElement("strong", null, "Default Style") : filterExprEd),
            React.createElement("td", null,
                React.createElement(core_1.Button, { intent: isStyleEditorOpen ? core_1.Intent.DANGER : core_1.Intent.PRIMARY, onClick: onToggle, icon: isStyleEditorOpen ? "cross" : "edit" }))),
        isStyleEditorOpen && React.createElement("tr", null,
            React.createElement("td", { colSpan: colSpan },
                React.createElement(exports.VectorStyleEditor, { style: featureStyle, onChange: onInnerStyleChanged, enableLine: props.enableLine, enablePoint: props.enablePoint, enablePolygon: props.enablePolygon, locale: props.locale }))));
};
var VectorLayerStyleEditor = function (props) {
    var filters = Object.keys(props.style).filter(function (k) { return k != ol_style_helpers_1.DEFAULT_STYLE_KEY; });
    var _a = React.useState({}), openStyleEditors = _a[0], setOpenStyleEditors = _a[1];
    var onFeatureStyleChanged = function (filter, style) {
        var _a;
        var updatedStyle = tslib_1.__assign({}, props.style);
        updatedStyle[filter] = style;
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, updatedStyle);
    };
    var onToggleStyleEditor = function (index, visible) {
        var opEds = tslib_1.__assign({}, openStyleEditors);
        if (!visible) {
            delete opEds[index];
        }
        else {
            opEds[index] = true;
        }
        setOpenStyleEditors(opEds);
    };
    return React.createElement("table", { style: { width: "100%" } },
        React.createElement("colgroup", null,
            props.enablePoint && React.createElement("col", { span: 1, style: { width: 24 } }),
            props.enableLine && React.createElement("col", { span: 1, style: { width: 24 } }),
            props.enablePolygon && React.createElement("col", { span: 1, style: { width: 24 } }),
            React.createElement("col", { span: 1 }),
            React.createElement("col", { span: 1, style: { width: 32 } })),
        React.createElement("tbody", null,
            filters.map(function (f, i) { return React.createElement(FilterItem, { key: "filter-".concat(i), filter: f, isDefault: false, onChange: function (f, s) { return onFeatureStyleChanged(f, s); }, featureStyle: props.style[filters[i]], isStyleEditorOpen: openStyleEditors[f] === true, onToggleStyleEditor: function (isVisible) { return onToggleStyleEditor(f, isVisible); }, locale: props.locale, enableLine: props.enableLine, enablePoint: props.enablePoint, enablePolygon: props.enablePolygon }); }),
            React.createElement(FilterItem, { isDefault: true, onChange: function (f, s) { return onFeatureStyleChanged(ol_style_helpers_1.DEFAULT_STYLE_KEY, s); }, featureStyle: props.style.default, isStyleEditorOpen: openStyleEditors[ol_style_helpers_1.DEFAULT_STYLE_KEY] === true, onToggleStyleEditor: function (isVisible) { return onToggleStyleEditor(ol_style_helpers_1.DEFAULT_STYLE_KEY, isVisible); }, locale: props.locale, enableLine: props.enableLine, enablePoint: props.enablePoint, enablePolygon: props.enablePolygon })));
};
exports.VectorLayerStyleEditor = VectorLayerStyleEditor;
//# sourceMappingURL=vector-style-editor.js.map