"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectionPanel = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var toolbar_1 = require("./toolbar");
var i18n_1 = require("../api/i18n");
var core_1 = require("@blueprintjs/core");
var string_1 = require("../utils/string");
var dompurify_1 = require("dompurify");
var DefaultSelectedFeature = function (props) {
    var selectedFeature = props.selectedFeature, selectedLayer = props.selectedLayer, locale = props.locale, allowHtmlValues = props.allowHtmlValues, cleanHTML = props.cleanHTML;
    var featureProps = [];
    if (selectedLayer === null || selectedLayer === void 0 ? void 0 : selectedLayer.Property) {
        var _loop_1 = function (lp) {
            var matches = selectedFeature.Property.filter(function (fp) { return fp.Name === lp.DisplayName; });
            if (matches.length === 1) {
                featureProps.push(matches[0]);
            }
        };
        for (var _i = 0, _a = selectedLayer.Property; _i < _a.length; _i++) {
            var lp = _a[_i];
            _loop_1(lp);
        }
    }
    else {
        for (var _b = 0, _c = selectedFeature.Property; _b < _c.length; _b++) {
            var fp = _c[_b];
            featureProps.push(fp);
        }
    }
    return React.createElement("table", { className: "selection-panel-property-grid bp3-html-table bp3-html-table-condensed bp3-html-table-bordered" },
        React.createElement("thead", null,
            React.createElement("tr", null,
                React.createElement("th", null, (0, i18n_1.tr)("SELECTION_PROPERTY", locale)),
                React.createElement("th", null, (0, i18n_1.tr)("SELECTION_VALUE", locale)))),
        React.createElement("tbody", null, featureProps.map(function (prop) {
            return React.createElement("tr", { key: prop.Name },
                React.createElement("td", { className: "property-name-cell", "data-property-name": prop.Name }, prop.Name),
                (function () {
                    var value = prop.Value;
                    if (allowHtmlValues && !(0, string_1.strIsNullOrEmpty)(value)) {
                        if (cleanHTML) {
                            value = cleanHTML(value);
                        }
                        else {
                            value = (0, dompurify_1.sanitize)(value);
                        }
                        return React.createElement("td", { className: "property-value-cell", "data-property-value-for": prop.Name, dangerouslySetInnerHTML: { __html: value } });
                    }
                    else {
                        return React.createElement("td", { className: "property-value-cell", "data-property-value-for": prop.Name }, prop.Value);
                    }
                })());
        })));
};
function buildToolbarItems(selPanel) {
    return [
        {
            bpIconName: "arrow-left",
            tooltip: (0, i18n_1.tr)("SELECTION_PREV_FEATURE", selPanel.locale),
            enabled: function () { return selPanel.canGoPrev(); },
            invoke: function () { return selPanel.prevFeature(); }
        },
        {
            bpIconName: "arrow-right",
            tooltip: (0, i18n_1.tr)("SELECTION_NEXT_FEATURE", selPanel.locale),
            enabled: function () { return selPanel.canGoNext(); },
            invoke: function () { return selPanel.nextFeature(); }
        },
        { isSeparator: true },
        {
            bpIconName: "path-search",
            tooltip: (0, i18n_1.tr)("SELECTION_ZOOMTO_FEATURE", selPanel.locale),
            enabled: function () { return selPanel.canZoomSelectedFeature(); },
            invoke: function () { return selPanel.zoomSelectedFeature(); }
        }
    ];
}
var SELECTION_TOOLBAR_STYLE = { float: "right", height: toolbar_1.DEFAULT_TOOLBAR_SIZE };
var SELECTION_PANEL_TOOLBAR_STYLE = { height: toolbar_1.DEFAULT_TOOLBAR_SIZE, backgroundColor: toolbar_1.TOOLBAR_BACKGROUND_COLOR };
var LAYER_COMBO_STYLE = { float: "left", height: toolbar_1.DEFAULT_TOOLBAR_SIZE };
var FloatClear = function () { return React.createElement("div", { style: { clear: "both" } }); };
/**
 * Displays attributes of selected features with the ability to zoom in on selected features
 * @param props
 */
exports.SelectionPanel = React.memo(function (props) {
    var maxHeight = props.maxHeight, selection = props.selection, selectedFeatureRenderer = props.selectedFeatureRenderer, allowHtmlValues = props.allowHtmlValues, cleanHTML = props.cleanHTML, onShowSelectedFeature = props.onShowSelectedFeature, onRequestZoomToFeature = props.onRequestZoomToFeature;
    var _a = React.useState(-1), selectedLayerIndex = _a[0], setSelectedLayerIndex = _a[1];
    var _b = React.useState(-1), featureIndex = _b[0], setFeatureIndex = _b[1];
    React.useEffect(function () {
        if (selection.getLayerCount() > 0) {
            if (selectedLayerIndex < 0) {
                setSelectedLayerIndex(0);
                setFeatureIndex(0);
            }
            else {
                var sl = selection.getLayerAt(selectedLayerIndex);
                if (!sl) {
                    setSelectedLayerIndex(0);
                    setFeatureIndex(0);
                }
                else {
                    if (featureIndex < 0 && sl.getFeatureCount() > 0) {
                        setFeatureIndex(0);
                    }
                }
            }
        }
    }, [selection]);
    var getCurrentLayer = function () {
        return selection.getLayerAt(selectedLayerIndex);
    };
    var getFeatureAt = function (index) {
        return selection.getFeatureAt(selectedLayerIndex, index);
    };
    var getCurrentFeature = function () {
        return getFeatureAt(featureIndex);
    };
    var canGoPrev = function () {
        return featureIndex > 0;
    };
    var canGoNext = function () {
        var layer = getCurrentLayer();
        if (layer != null) {
            return featureIndex + 1 < layer.getFeatureCount();
        }
        return false;
    };
    var canZoomSelectedFeature = function () {
        var feat = getCurrentFeature();
        return (feat === null || feat === void 0 ? void 0 : feat.Bounds) != null;
    };
    var prevFeature = function () {
        var _a;
        var newIndex = featureIndex - 1;
        setFeatureIndex(newIndex);
        var layer = getCurrentLayer();
        if (layer) {
            var layerId = layer.getLayerId();
            var sKey = (_a = getFeatureAt(newIndex)) === null || _a === void 0 ? void 0 : _a.SelectionKey;
            if (sKey && layerId) {
                onShowSelectedFeature === null || onShowSelectedFeature === void 0 ? void 0 : onShowSelectedFeature(layerId, sKey);
            }
        }
    };
    var nextFeature = function () {
        var _a;
        var newIndex = featureIndex + 1;
        setFeatureIndex(newIndex);
        var layer = getCurrentLayer();
        if (layer) {
            var layerId = layer.getLayerId();
            var sKey = (_a = getFeatureAt(newIndex)) === null || _a === void 0 ? void 0 : _a.SelectionKey;
            if (sKey && layerId) {
                onShowSelectedFeature === null || onShowSelectedFeature === void 0 ? void 0 : onShowSelectedFeature(layerId, sKey);
            }
        }
    };
    var zoomSelectedFeature = function () {
        var feat = getCurrentFeature();
        if (feat) {
            onRequestZoomToFeature(feat);
        }
    };
    var onSelectedLayerChanged = function (e) {
        setSelectedLayerIndex(e.target.value);
        setFeatureIndex(0);
    };
    var locale = props.locale || i18n_1.DEFAULT_LOCALE;
    var feat;
    var meta;
    if (selection != null && selectedLayerIndex >= 0 && featureIndex >= 0) {
        var selLayer = selection.getLayerAt(selectedLayerIndex);
        feat = selLayer === null || selLayer === void 0 ? void 0 : selLayer.getFeatureAt(featureIndex);
        meta = selLayer === null || selLayer === void 0 ? void 0 : selLayer.getLayerMetadata();
    }
    var selBodyStyle;
    if (maxHeight) {
        selBodyStyle = {
            overflowY: "auto",
            maxHeight: maxHeight - toolbar_1.DEFAULT_TOOLBAR_SIZE
        };
    }
    else {
        selBodyStyle = {
            overflow: "auto",
            position: "absolute",
            top: toolbar_1.DEFAULT_TOOLBAR_SIZE,
            bottom: 0,
            right: 0,
            left: 0
        };
    }
    return React.createElement("div", null,
        (function () {
            if ((selection === null || selection === void 0 ? void 0 : selection.getLayerCount()) > 0) {
                var selectionToolbarItems = buildToolbarItems({
                    locale: locale,
                    canGoPrev: canGoPrev,
                    canGoNext: canGoNext,
                    prevFeature: prevFeature,
                    nextFeature: nextFeature,
                    canZoomSelectedFeature: canZoomSelectedFeature,
                    zoomSelectedFeature: zoomSelectedFeature
                });
                return React.createElement("div", { className: "selection-panel-toolbar", style: SELECTION_PANEL_TOOLBAR_STYLE },
                    React.createElement("div", { className: "bp3-select selection-panel-layer-selector" },
                        React.createElement(core_1.HTMLSelect, { value: selectedLayerIndex, style: LAYER_COMBO_STYLE, onChange: onSelectedLayerChanged }, selection.getLayers().map(function (layer, index) {
                            var _a, _b;
                            var lid = layer.getLayerId();
                            var lname = layer.getName();
                            var lkey = lid !== null && lid !== void 0 ? lid : index;
                            var label = lid ? ((_b = (_a = props === null || props === void 0 ? void 0 : props.onResolveLayerLabel) === null || _a === void 0 ? void 0 : _a.call(props, lid, lname)) !== null && _b !== void 0 ? _b : lname)
                                : lname;
                            return React.createElement("option", { key: "selected-layer-".concat(lkey), value: "".concat(index) }, label);
                        }))),
                    React.createElement(toolbar_1.Toolbar, { childItems: selectionToolbarItems, containerStyle: SELECTION_TOOLBAR_STYLE }),
                    React.createElement(FloatClear, null));
            }
        })(),
        React.createElement("div", { className: "selection-panel-body", style: selBodyStyle }, (function () {
            if (feat) {
                if (selectedFeatureRenderer) {
                    return selectedFeatureRenderer({ selectedFeature: feat, cleanHTML: cleanHTML, allowHtmlValues: allowHtmlValues, selectedLayer: meta, locale: locale });
                }
                else {
                    return React.createElement(DefaultSelectedFeature, { selectedFeature: feat, cleanHTML: cleanHTML, allowHtmlValues: allowHtmlValues, selectedLayer: meta, locale: locale });
                }
            }
            else if (!((selection === null || selection === void 0 ? void 0 : selection.getLayerCount()) > 0)) {
                return React.createElement(core_1.Callout, { intent: core_1.Intent.PRIMARY, icon: "info-sign" },
                    React.createElement("p", { className: "selection-panel-no-selection" }, (0, i18n_1.tr)("NO_SELECTED_FEATURES", locale)));
            }
        })()));
});
//# sourceMappingURL=selection-panel.js.map