"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ViewerOptions = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var common_1 = require("../api/common");
var i18n_1 = require("../api/i18n");
var units_1 = require("../utils/units");
var core_1 = require("@blueprintjs/core");
var hooks_1 = require("./hooks");
var map_1 = require("../actions/map");
var hooks_mapguide_1 = require("./hooks-mapguide");
var constants_1 = require("../constants");
var context_1 = require("../components/map-providers/context");
var ViewerOptions = function () {
    var _a, _b, _c;
    var externalBaseLayers = (_a = (0, hooks_1.useActiveMapExternalBaseLayers)()) === null || _a === void 0 ? void 0 : _a.filter(function (ebl) { return (0, common_1.isVisualBaseLayer)(ebl); });
    var mapName = (0, hooks_1.useActiveMapName)();
    var layerTransparency = (0, hooks_mapguide_1.useActiveMapLayerTransparency)();
    var featureTooltipsEnabled = (0, hooks_1.useViewerFeatureTooltipsEnabled)();
    var selectDragPanEnabled = (0, hooks_1.useViewerSelectCanDragPan)();
    var manualFeatureTooltips = (0, hooks_1.useConfiguredManualFeatureTooltips)();
    var viewSizeUnits = (0, hooks_1.useViewerSizeUnits)();
    var stateless = (0, hooks_1.useViewerIsStateless)();
    var map = (0, hooks_mapguide_1.useActiveMapState)();
    var locale = (0, hooks_1.useViewerLocale)();
    var dispatch = (0, context_1.useReduxDispatch)();
    var toggleManualMapTipsAction = function (enabled) { return dispatch((0, map_1.setManualFeatureTooltipsEnabled)(enabled)); };
    var toggleMapTipsAction = function (enabled) { return dispatch((0, map_1.setFeatureTooltipsEnabled)(enabled)); };
    var toggleSelectDragPanAction = function (enabled) { return dispatch((0, map_1.enableSelectDragPan)(enabled)); };
    var setLayerTransparencyAction = function (mapName, id, opacity) { return dispatch((0, map_1.setLayerTransparency)(mapName, id, opacity)); };
    var setViewSizeDisplayUnitsAction = function (units) { return dispatch((0, map_1.setViewSizeUnits)(units)); };
    var onMgLayerOpacityChanged = function (mapName, layerId, value) {
        if (mapName) {
            setLayerTransparencyAction === null || setLayerTransparencyAction === void 0 ? void 0 : setLayerTransparencyAction(mapName, layerId, value);
        }
    };
    var onBaseOpacityChanged = function (value) {
        onMgLayerOpacityChanged(mapName, constants_1.LAYER_ID_BASE, value);
    };
    var onMgDynamicOverlayOpacityChanged = function (value) {
        onMgLayerOpacityChanged(mapName, constants_1.LAYER_ID_MG_DYNAMIC_OVERLAY, value);
    };
    var onMgOpacityChanged = function (value) {
        onMgLayerOpacityChanged(mapName, constants_1.LAYER_ID_MG_BASE, value);
    };
    var onMgSelOpacityChanged = function (value) {
        onMgLayerOpacityChanged(mapName, constants_1.LAYER_ID_MG_SEL_OVERLAY, value);
    };
    var onViewSizeUnitsChanged = function (e) {
        setViewSizeDisplayUnitsAction(e.target.value);
    };
    var onFeatureTooltipsChanged = function (e) {
        toggleMapTipsAction(e.target.checked);
    };
    var onSelectDragPanEnabled = function (e) {
        toggleSelectDragPanAction(e.target.checked);
    };
    var onManualFeatureTooltipsChanged = function (e) {
        toggleManualMapTipsAction(e.target.checked);
    };
    var units = (0, units_1.getUnits)();
    var opBase = 1.0;
    var opMgBase = 1.0;
    var opMgSelOverlay = 1.0;
    var opMgDynamicOverlay = 1.0;
    if (layerTransparency) {
        if (constants_1.LAYER_ID_BASE in layerTransparency) {
            opBase = layerTransparency[constants_1.LAYER_ID_BASE];
        }
        if (constants_1.LAYER_ID_MG_BASE in layerTransparency) {
            opMgBase = layerTransparency[constants_1.LAYER_ID_MG_BASE];
        }
        if (constants_1.LAYER_ID_MG_DYNAMIC_OVERLAY in layerTransparency) {
            opMgDynamicOverlay = layerTransparency[constants_1.LAYER_ID_MG_DYNAMIC_OVERLAY];
        }
        if (constants_1.LAYER_ID_MG_SEL_OVERLAY in layerTransparency) {
            opMgSelOverlay = layerTransparency[constants_1.LAYER_ID_MG_SEL_OVERLAY];
        }
    }
    var hasMgBaseLayers = false;
    var isStateless = stateless;
    if (!map) {
        isStateless = true;
    }
    else {
        hasMgBaseLayers = ((_c = (_b = map.FiniteDisplayScale) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
    }
    return React.createElement("div", { className: "component-viewer-options" },
        React.createElement("h5", null, (0, i18n_1.tr)("VIEWER_OPTIONS", locale)),
        React.createElement("hr", null),
        !isStateless && React.createElement("label", { className: "bp3-control bp3-switch" },
            React.createElement("input", { type: "checkbox", checked: featureTooltipsEnabled, onChange: onFeatureTooltipsChanged }),
            React.createElement("span", { className: "bp3-control-indicator" }),
            (0, i18n_1.tr)("FEATURE_TOOLTIPS", locale)),
        (function () {
            if (!isStateless && featureTooltipsEnabled) {
                return React.createElement("label", { className: "bp3-control bp3-switch" },
                    React.createElement("input", { type: "checkbox", checked: manualFeatureTooltips, onChange: onManualFeatureTooltipsChanged }),
                    React.createElement("span", { className: "bp3-control-indicator" }),
                    (0, i18n_1.tr)("MANUAL_FEATURE_TOOLTIPS", locale));
            }
        })(),
        React.createElement("label", { className: "bp3-control bp3-switch" },
            React.createElement("input", { type: "checkbox", checked: selectDragPanEnabled, onChange: onSelectDragPanEnabled }),
            React.createElement("span", { className: "bp3-control-indicator" }),
            (0, i18n_1.tr)("ENABLE_SELECT_DRAGPAN", locale)),
        React.createElement("fieldset", null,
            React.createElement("legend", null, (0, i18n_1.tr)("LAYER_TRANSPARENCY", locale)),
            (function () {
                if (externalBaseLayers) {
                    return React.createElement("label", { className: "bp3-label noselect" },
                        (0, i18n_1.tr)("LAYER_ID_BASE", locale),
                        React.createElement("div", { style: { paddingLeft: 8, paddingRight: 8 } },
                            React.createElement(core_1.Slider, { min: 0, max: 1.0, stepSize: 0.01, value: opBase, onChange: onBaseOpacityChanged })));
                }
            })(),
            hasMgBaseLayers && React.createElement("label", { className: "bp3-label noselect" },
                (0, i18n_1.tr)("LAYER_ID_MG_BASE_LAYERS", locale),
                React.createElement("div", { style: { paddingLeft: 8, paddingRight: 8 } },
                    React.createElement(core_1.Slider, { min: 0, max: 1.0, stepSize: 0.01, value: opMgBase, onChange: onMgOpacityChanged }))),
            React.createElement("label", { className: "bp3-label noselect" },
                map ? (0, i18n_1.tr)("LAYER_ID_MG_BASE", locale) : (0, i18n_1.tr)("LAYER_ID_SUBJECT", locale),
                React.createElement("div", { style: { paddingLeft: 8, paddingRight: 8 } },
                    React.createElement(core_1.Slider, { min: 0, max: 1.0, stepSize: 0.01, value: opMgDynamicOverlay, onChange: onMgDynamicOverlayOpacityChanged }))),
            !isStateless && React.createElement("label", { className: "bp3-label noselect" },
                (0, i18n_1.tr)("LAYER_ID_MG_SEL_OVERLAY", locale),
                React.createElement("div", { style: { paddingLeft: 8, paddingRight: 8 } },
                    React.createElement(core_1.Slider, { min: 0, max: 1.0, stepSize: 0.01, value: opMgSelOverlay, onChange: onMgSelOpacityChanged })))),
        React.createElement("label", { className: "bp3-label" },
            (0, i18n_1.tr)("MAP_SIZE_DISPLAY_UNITS", locale),
            React.createElement("div", { className: "bp3-select" },
                React.createElement(core_1.HTMLSelect, { value: viewSizeUnits, onChange: onViewSizeUnitsChanged }, units.map(function (u) {
                    var uom = u[0];
                    var ui = (0, units_1.getUnitOfMeasure)(uom);
                    return React.createElement("option", { key: uom, value: uom }, ui.localizedName(locale));
                })))));
};
exports.ViewerOptions = ViewerOptions;
//# sourceMappingURL=viewer-options.js.map