"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GenericLayout = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var component_1 = require("../api/registry/component");
var viewer_shim_1 = require("../containers/viewer-shim");
var modal_launcher_1 = require("../containers/modal-launcher");
var flyout_region_1 = require("../containers/flyout-region");
var init_warning_display_1 = require("../containers/init-warning-display");
var core_1 = require("@blueprintjs/core");
var common_1 = require("../api/common");
var map_1 = require("../actions/map");
var command_1 = require("../api/registry/command");
var hooks_1 = require("../containers/hooks");
var context_1 = require("../components/map-providers/context");
var hooks_mapguide_1 = require("../containers/hooks-mapguide");
var i18n_1 = require("../api/i18n");
var hooks_2 = require("./hooks");
var MapToolbar = function (props) {
    var locale = props.locale, featureTooltipsEnabled = props.featureTooltipsEnabled, hasSelection = props.hasSelection, map = props.map, onInvokeCommand = props.onInvokeCommand, onSetActiveTool = props.onSetActiveTool, activeTool = props.activeTool, isLayerManagerOpen = props.isLayerManagerOpen, setIsLayerManagerOpen = props.setIsLayerManagerOpen, setIsLegendOpen = props.setIsLegendOpen, setIsSelectionPanelOpen = props.setIsSelectionPanelOpen, onSetFeatureTooltips = props.onSetFeatureTooltips;
    var context = (0, context_1.useMapProviderContext)();
    var _a = React.useState(false), isExportingImage = _a[0], setIsExportingImage = _a[1];
    return React.createElement(React.Fragment, null,
        React.createElement(core_1.ButtonGroup, { vertical: true, style: { position: "absolute", left: 30, top: 30 } },
            React.createElement(core_1.Button, { icon: "plus", title: (0, i18n_1.tr)("NAVIGATOR_ZOOM_IN"), onClick: function () { return onInvokeCommand(command_1.DefaultCommands.ZoomIn); } }),
            React.createElement(core_1.Button, { icon: "minus", title: (0, i18n_1.tr)("NAVIGATOR_ZOOM_OUT"), onClick: function () { return onInvokeCommand(command_1.DefaultCommands.ZoomOut); } }),
            React.createElement(core_1.Button, { icon: "hand", intent: activeTool == common_1.ActiveMapTool.Pan ? core_1.Intent.PRIMARY : core_1.Intent.NONE, onClick: function () { return onInvokeCommand(command_1.DefaultCommands.Pan); } }),
            React.createElement(core_1.Button, { icon: "zoom-to-fit", title: (0, i18n_1.tr)("LAYER_MANAGER_TT_ZOOM_EXTENTS"), onClick: function () { return onInvokeCommand(command_1.DefaultCommands.ZoomExtents); } }),
            React.createElement(core_1.Button, { icon: "select", intent: activeTool == common_1.ActiveMapTool.Select ? core_1.Intent.PRIMARY : core_1.Intent.NONE, onClick: function () { return onSetActiveTool(common_1.ActiveMapTool.Select); } }),
            React.createElement(core_1.Button, { icon: "layers", title: (0, i18n_1.tr)("MANAGE_LAYERS", locale), intent: isLayerManagerOpen ? core_1.Intent.PRIMARY : core_1.Intent.NONE, onClick: function () { return setIsLayerManagerOpen(!isLayerManagerOpen); } }),
            map && React.createElement(core_1.Button, { icon: "comment", title: (0, i18n_1.tr)("FEATURE_TOOLTIPS", locale), intent: featureTooltipsEnabled ? core_1.Intent.PRIMARY : core_1.Intent.NONE, onClick: function () { return onSetFeatureTooltips(!featureTooltipsEnabled); } }),
            React.createElement(core_1.Button, { icon: "th", intent: hasSelection ? core_1.Intent.SUCCESS : core_1.Intent.NONE, title: (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", locale), onClick: function () { return setIsSelectionPanelOpen(true); } }),
            map && React.createElement(core_1.Button, { icon: "properties", title: (0, i18n_1.tr)("TPL_TITLE_LEGEND", locale), onClick: function () { return setIsLegendOpen(true); } }),
            React.createElement(core_1.Popover, { usePortal: false, position: "right", minimal: false },
                React.createElement(core_1.Button, { icon: "map" }),
                React.createElement(core_1.Card, { interactive: true, elevation: core_1.Elevation.TWO, style: { minWidth: 200 } },
                    React.createElement("h5", { className: "bp3-heading" },
                        React.createElement("a", { href: "#" }, "Active Base Layer")),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.BaseMapSwitcher, locale: locale }),
                    React.createElement("h5", { className: "bp3-heading" },
                        React.createElement("a", { href: "#" }, "Current Map")),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.MapMenu, locale: locale }))),
            React.createElement(core_1.Popover, { usePortal: false, position: "right", minimal: false },
                React.createElement(core_1.Button, { icon: "cog", title: (0, i18n_1.tr)("VIEWER_OPTIONS", locale) }),
                React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.ViewerOptions })),
            React.createElement(core_1.Button, { icon: "print", onClick: function () { return onInvokeCommand(command_1.DefaultCommands.Print); } })));
};
/**
 * A viewer template geared towards general purpose display of maps
 *
 * @since 0.14
 */
var GenericLayout = function () {
    var _a = React.useState(false), isLayerManagerOpen = _a[0], setIsLayerManagerOpen = _a[1];
    var _b = React.useState(false), isLegendOpen = _b[0], setIsLegendOpen = _b[1];
    var _c = React.useState(false), isSelectionPanelOpen = _c[0], setIsSelectionPanelOpen = _c[1];
    var _d = (0, hooks_2.useCommonTemplateState)(), locale = _d.locale, dispatch = _d.dispatch;
    var map = (0, hooks_mapguide_1.useActiveMapState)();
    var tbState = (0, hooks_1.useReducedToolbarAppState)();
    //console.log("tbState", tbState.hasClientSelection, tbState.hasSelection);
    var activeTool = (0, hooks_1.useViewerActiveTool)();
    var onInvokeCommand = function (name) {
        var cmd = (0, command_1.getCommand)(name);
        if (cmd) {
            dispatch((0, map_1.invokeCommand)(cmd));
        }
    };
    var onSetActiveTool = function (tool) {
        dispatch((0, map_1.setActiveTool)(common_1.ActiveMapTool.Select));
    };
    var onSetFeatureTooltips = function (flag) {
        dispatch((0, map_1.setFeatureTooltipsEnabled)(flag));
    };
    return React.createElement("div", { style: { width: "100%", height: "100%" } },
        React.createElement(modal_launcher_1.ModalLauncher, null),
        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Map, locale: locale, componentProps: {
                // MapToolbar has to be a child component, otherwise the map provider context is not accessible
                children: React.createElement(MapToolbar, { locale: locale, featureTooltipsEnabled: tbState.featureTooltipsEnabled, hasSelection: tbState.hasClientSelection || tbState.hasSelection, map: map, activeTool: activeTool, isLayerManagerOpen: isLayerManagerOpen, setIsLegendOpen: function (f) { return setIsLegendOpen(f); }, setIsSelectionPanelOpen: function (f) { return setIsSelectionPanelOpen(f); }, setIsLayerManagerOpen: function (f) { return setIsLayerManagerOpen(f); }, onInvokeCommand: onInvokeCommand, onSetActiveTool: onSetActiveTool, onSetFeatureTooltips: onSetFeatureTooltips })
            } }),
        React.createElement(core_1.Drawer, { icon: "layers", size: core_1.DrawerSize.SMALL, canOutsideClickClose: true, onClose: function () { return setIsLayerManagerOpen(false); }, title: (0, i18n_1.tr)("MANAGE_LAYERS", locale), position: core_1.Position.LEFT, usePortal: false, isOpen: isLayerManagerOpen },
            React.createElement("div", { style: { overflowY: "auto" } },
                React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.AddManageLayers, locale: locale }))),
        React.createElement(core_1.Drawer, { icon: "properties", size: core_1.DrawerSize.SMALL, canOutsideClickClose: true, onClose: function () { return setIsLegendOpen(false); }, title: (0, i18n_1.tr)("TPL_TITLE_LEGEND", locale), position: core_1.Position.LEFT, usePortal: false, isOpen: isLegendOpen },
            React.createElement("div", { style: { overflowY: "auto" } },
                React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Legend, locale: locale }))),
        React.createElement(core_1.Drawer, { icon: "th", size: core_1.DrawerSize.SMALL, canOutsideClickClose: true, onClose: function () { return setIsSelectionPanelOpen(false); }, title: (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", locale), position: core_1.Position.LEFT, usePortal: false, isOpen: isSelectionPanelOpen },
            React.createElement("div", { style: { width: "100%", height: "100%", position: "relative" } },
                React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectionPanel, locale: locale }))),
        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Navigator, locale: locale }),
        React.createElement(viewer_shim_1.ViewerApiShim, null),
        React.createElement(flyout_region_1.FlyoutRegionContainer, null),
        React.createElement(init_warning_display_1.InitWarningDisplay, null),
        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.MouseCoordinates, locale: locale }));
};
exports.GenericLayout = GenericLayout;
//# sourceMappingURL=generic.js.map