"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ManageLayers = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var i18n_1 = require("../../api/i18n");
var core_1 = require("@blueprintjs/core");
var string_1 = require("../../utils/string");
var ol_style_contracts_1 = require("../../api/ol-style-contracts");
var vector_style_editor_1 = require("../vector-style-editor");
function isBoundsZoomable(layer) {
    var _a;
    //TODO: See if WGS84_BBOX [is/can be] surfaced to ILayerInfo
    if (((_a = layer.metadata) === null || _a === void 0 ? void 0 : _a.geojson_as_vt) === true) {
        return false;
    }
    return layer.type != "WMS";
}
var OpenPanel;
(function (OpenPanel) {
    OpenPanel[OpenPanel["None"] = 0] = "None";
    OpenPanel[OpenPanel["MoreLayerOptions"] = 1] = "MoreLayerOptions";
    OpenPanel[OpenPanel["EditVectorStyle"] = 2] = "EditVectorStyle";
    OpenPanel[OpenPanel["WmsLegend"] = 3] = "WmsLegend";
})(OpenPanel || (OpenPanel = {}));
var HEATMAP_SLIDER_RAMP = [0, 10, 20, 30, 40, 50];
var LAYER_SWITCH_STYLE = { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" };
var ManageLayerItem = function (props) {
    var _a, _b, _c, _d;
    var layer = props.layer, locale = props.locale, canMoveUp = props.canMoveUp, canMoveDown = props.canMoveDown, currentResolution = props.currentResolution, onSetOpacity = props.onSetOpacity, onSetHeatmapBlur = props.onSetHeatmapBlur, onSetHeatmapRadius = props.onSetHeatmapRadius, onRemoveLayer = props.onRemoveLayer, onMoveLayerUp = props.onMoveLayerUp, onMoveLayerDown = props.onMoveLayerDown, onZoomToBounds = props.onZoomToBounds, onSetVisibility = props.onSetVisibility, onVectorStyleChanged = props.onVectorStyleChanged;
    var _e = React.useState(undefined), wmsLegendUrl = _e[0], setWmsLegendUrl = _e[1];
    var _f = React.useState(OpenPanel.None), openPanel = _f[0], setOpenPanel = _f[1];
    var onToggleWmsLegend = function (action) {
        if (wmsLegendUrl) {
            setWmsLegendUrl(undefined);
            setOpenPanel(OpenPanel.None);
        }
        else {
            var url = action(currentResolution);
            setWmsLegendUrl(url);
            setOpenPanel(OpenPanel.WmsLegend);
        }
    };
    var toggleOpenPanel = function (panel) {
        var p = OpenPanel.None;
        switch (panel) {
            case OpenPanel.EditVectorStyle:
            case OpenPanel.MoreLayerOptions:
            case OpenPanel.WmsLegend:
                p = (panel == openPanel) ? OpenPanel.None : panel;
                break;
        }
        setOpenPanel(p);
    };
    var isBusy = (layer.busyWorkerCount > 0);
    if (isBusy) {
        return React.createElement(core_1.Card, null,
            React.createElement(core_1.Spinner, { size: 30 }),
            React.createElement("p", { style: { textAlign: "center", marginTop: 5 } }, (0, i18n_1.tr)("LOADING_LAYER", locale, { name: layer.name })));
    }
    var canZoom = isBoundsZoomable(layer);
    var iconName = "layer";
    if (layer.type == "WMS") {
        iconName = "media";
    }
    var extraActions = [];
    var extensions = layer.extensions;
    var isWms = false;
    if (extensions) {
        switch (extensions.type) {
            case "WMS":
                {
                    isWms = true;
                    if (extensions.getLegendUrl) {
                        extraActions.push(React.createElement(core_1.Button, { key: "toggle-wms-legend", intent: core_1.Intent.SUCCESS, icon: "info-sign", onClick: function () { return onToggleWmsLegend(extensions.getLegendUrl); } }));
                    }
                }
        }
    }
    if (layer.vectorStyle) {
        if (layer.type != "KML" && layer.heatmap == null) {
            extraActions.push(React.createElement(core_1.Button, { key: "edit-vector-style", title: (0, i18n_1.tr)("LAYER_MANAGER_TT_EDIT_STYLE", locale), intent: core_1.Intent.PRIMARY, icon: "edit", onClick: function () { return toggleOpenPanel(OpenPanel.EditVectorStyle); } }));
        }
    }
    extraActions.push(React.createElement(core_1.Button, { key: "more-layer-options", title: (0, i18n_1.tr)("LAYER_MANAGER_TT_MORE_OPTIONS", locale), intent: core_1.Intent.PRIMARY, icon: "cog", onClick: function () { return toggleOpenPanel(OpenPanel.MoreLayerOptions); } }));
    var isWmsLegendOpen = !(0, string_1.strIsNullOrEmpty)(wmsLegendUrl);
    var layerLabel = (_a = layer.displayName) !== null && _a !== void 0 ? _a : layer.name;
    var theVectorStyle = (_c = (_b = layer.cluster) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : layer.vectorStyle;
    var which;
    if (theVectorStyle == layer.vectorStyle) {
        which = ol_style_contracts_1.VectorStyleSource.Base;
    }
    else if (theVectorStyle == ((_d = layer.cluster) === null || _d === void 0 ? void 0 : _d.style)) {
        which = ol_style_contracts_1.VectorStyleSource.Cluster;
    }
    var enableLine = false;
    var enablePoint = false;
    var enablePolygon = false;
    for (var k in theVectorStyle) {
        if (theVectorStyle[k].point) {
            enablePoint = true;
        }
        if (theVectorStyle[k].line) {
            enableLine = true;
        }
        if (theVectorStyle[k].polygon) {
            enablePolygon = true;
        }
    }
    return React.createElement(core_1.Card, { key: layer.name },
        React.createElement(core_1.Switch, { style: LAYER_SWITCH_STYLE, checked: layer.visible, onChange: function () { return onSetVisibility(layer.name, !layer.visible); }, labelElement: React.createElement("span", { title: layerLabel },
                React.createElement(core_1.Icon, { icon: iconName }),
                " ",
                layerLabel) }),
        React.createElement(core_1.ButtonGroup, null,
            React.createElement(core_1.Button, { disabled: !canMoveUp, title: (0, i18n_1.tr)("LAYER_MANAGER_TT_MOVE_UP", locale), intent: core_1.Intent.PRIMARY, icon: "caret-up", onClick: function () { return onMoveLayerUp(layer.name); } }),
            React.createElement(core_1.Button, { disabled: !canMoveDown, title: (0, i18n_1.tr)("LAYER_MANAGER_TT_MOVE_DOWN", locale), intent: core_1.Intent.PRIMARY, icon: "caret-down", onClick: function () { return onMoveLayerDown(layer.name); } }),
            React.createElement(core_1.Button, { disabled: !canZoom, title: (0, i18n_1.tr)("LAYER_MANAGER_TT_ZOOM_EXTENTS", locale), intent: core_1.Intent.SUCCESS, icon: "zoom-to-fit", onClick: function () { return onZoomToBounds(layer.name); } }),
            React.createElement(core_1.Button, { title: (0, i18n_1.tr)("LAYER_MANAGER_TT_REMOVE", locale), intent: core_1.Intent.DANGER, icon: "trash", onClick: function () { return onRemoveLayer(layer.name); } }),
            extraActions),
        React.createElement(core_1.Collapse, { isOpen: openPanel == OpenPanel.MoreLayerOptions },
            React.createElement(core_1.Card, null,
                React.createElement("h5", { className: "bp3-heading" },
                    React.createElement("a", { href: "#" }, (0, i18n_1.tr)("MORE_LAYER_OPTIONS", locale))),
                React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LAYER_OPACITY", locale) },
                    React.createElement(core_1.Slider, { min: 0, max: 1.0, stepSize: 0.01, value: layer.opacity, onChange: function (e) { return onSetOpacity(layer.name, e); } })),
                layer.heatmap && React.createElement(React.Fragment, null,
                    React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LAYER_HEATMAP_BLUR", locale) },
                        React.createElement(core_1.Slider, { min: 1, max: 50, stepSize: 1, labelValues: HEATMAP_SLIDER_RAMP, value: layer.heatmap.blur, onChange: function (e) { return onSetHeatmapBlur(layer.name, e); } })),
                    React.createElement(core_1.FormGroup, { label: (0, i18n_1.tr)("LAYER_HEATMAP_RADIUS", locale) },
                        React.createElement(core_1.Slider, { min: 1, max: 50, stepSize: 1, labelValues: HEATMAP_SLIDER_RAMP, value: layer.heatmap.radius, onChange: function (e) { return onSetHeatmapRadius(layer.name, e); } }))))),
        isWms && React.createElement(core_1.Collapse, { isOpen: isWmsLegendOpen },
            React.createElement(core_1.Card, null,
                React.createElement("h5", { className: "bp3-heading" },
                    React.createElement("a", { href: "#" }, (0, i18n_1.tr)("WMS_LEGEND", locale))),
                React.createElement("img", { src: wmsLegendUrl }))),
        theVectorStyle && React.createElement(core_1.Collapse, { isOpen: openPanel == OpenPanel.EditVectorStyle },
            React.createElement("div", { style: { padding: 5 } },
                React.createElement("h5", { className: "bp3-heading" },
                    React.createElement("a", { href: "#" }, (0, i18n_1.tr)("VECTOR_LAYER_STYLE", locale))),
                React.createElement(vector_style_editor_1.VectorLayerStyleEditor, { onChange: function (st) { return onVectorStyleChanged(layer.name, st, which); }, locale: locale, style: theVectorStyle, enablePoint: enablePoint, enableLine: enableLine, enablePolygon: enablePolygon }))));
};
/**
 * @hidden
 */
var ManageLayers = function (props) {
    var locale = props.locale, currentResolution = props.currentResolution, onSetOpacity = props.onSetOpacity, onSetHeatmapBlur = props.onSetHeatmapBlur, onSetHeatmapRadius = props.onSetHeatmapRadius, onRemoveLayer = props.onRemoveLayer, onMoveLayerUp = props.onMoveLayerUp, onMoveLayerDown = props.onMoveLayerDown, onZoomToBounds = props.onZoomToBounds, onSetVisibility = props.onSetVisibility, onVectorStyleChanged = props.onVectorStyleChanged;
    var _a = React.useState(props.layers), layers = _a[0], setLayers = _a[1];
    React.useEffect(function () {
        setLayers(props.layers);
    }, [props.layers]);
    if (layers.length) {
        return React.createElement("div", null, layers.map(function (lyr, i) {
            var cannotMoveUp = (i == 0 || layers.length <= 1);
            var cannotMoveDown = (i >= layers.length - 1 || layers.length <= 1);
            return React.createElement(ManageLayerItem, { key: "manage-layer-".concat(i), layer: lyr, locale: locale, canMoveUp: !cannotMoveUp, canMoveDown: !cannotMoveDown, currentResolution: currentResolution, onSetOpacity: onSetOpacity, onSetHeatmapBlur: onSetHeatmapBlur, onSetHeatmapRadius: onSetHeatmapRadius, onRemoveLayer: onRemoveLayer, onMoveLayerUp: onMoveLayerUp, onMoveLayerDown: onMoveLayerDown, onZoomToBounds: onZoomToBounds, onSetVisibility: onSetVisibility, onVectorStyleChanged: onVectorStyleChanged });
        }));
    }
    else {
        return React.createElement(core_1.NonIdealState, { icon: "layers", title: (0, i18n_1.tr)("NO_EXTERNAL_LAYERS", locale), description: (0, i18n_1.tr)("NO_EXTERNAL_LAYERS_DESC", locale, { tabName: (0, i18n_1.tr)("ADD_LAYER", locale) }) });
    }
};
exports.ManageLayers = ManageLayers;
//# sourceMappingURL=manage-layers.js.map