"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LimeGoldTemplateLayout = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var component_1 = require("../api/registry/component");
var toolbar_1 = require("../components/toolbar");
var toolbar_2 = require("../containers/toolbar");
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 i18n_1 = require("../api/i18n");
var template_1 = require("../reducers/template");
var init_warning_display_1 = require("../containers/init-warning-display");
var react_splitter_layout_1 = tslib_1.__importDefault(require("react-splitter-layout"));
var actions_1 = require("../constants/actions");
var core_1 = require("@blueprintjs/core");
var hooks_1 = require("./hooks");
var hooks_2 = require("../containers/hooks");
function limegoldTemplateReducer(origState, state, action) {
    switch (action.type) {
        case actions_1.ActionType.FUSION_SET_LEGEND_VISIBILITY:
            {
                var data = action.payload;
                if (typeof (data) == "boolean") {
                    var state1 = void 0;
                    if (data === true) {
                        state1 = { legendVisible: true, taskPaneVisible: false, selectionPanelVisible: false };
                    }
                    else {
                        state1 = { legendVisible: data };
                    }
                    return tslib_1.__assign(tslib_1.__assign({}, state), state1);
                }
            }
        case actions_1.ActionType.FUSION_SET_SELECTION_PANEL_VISIBILITY:
            {
                var data = action.payload;
                if (typeof (data) == "boolean") {
                    var state1 = void 0;
                    if (data === true) {
                        state1 = { legendVisible: false, taskPaneVisible: false, selectionPanelVisible: true };
                    }
                    else {
                        state1 = { selectionPanelVisible: data };
                    }
                    return tslib_1.__assign(tslib_1.__assign({}, state), state1);
                }
            }
        case actions_1.ActionType.TASK_INVOKE_URL:
            {
                var state1 = { taskPaneVisible: true, selectionPanelVisible: false, legendVisible: false };
                return tslib_1.__assign(tslib_1.__assign({}, state), state1);
            }
        case actions_1.ActionType.FUSION_SET_TASK_PANE_VISIBILITY:
            {
                var data = action.payload;
                if (typeof (data) == "boolean") {
                    var state1 = void 0;
                    if (data === true) {
                        state1 = { legendVisible: false, taskPaneVisible: true, selectionPanelVisible: false };
                    }
                    else {
                        state1 = { taskPaneVisible: data };
                    }
                    return tslib_1.__assign(tslib_1.__assign({}, state), state1);
                }
            }
        case actions_1.ActionType.FUSION_SET_ELEMENT_STATE:
            {
                var data = action.payload;
                if ((0, template_1.isElementState)(data)) {
                    return tslib_1.__assign(tslib_1.__assign({}, state), data);
                }
            }
    }
    return state;
}
var SIDEBAR_PADDING = 0;
var TOP_BAR_HEIGHT = 35;
var TAB_BAR_HEIGHT = 30;
var STATUS_BAR_HEIGHT = 18;
var DEFAULT_LEGEND_COMPONENT_PROPS = { inlineBaseLayerSwitcher: false };
/**
 * A viewer template that resembles the LimeGold Fusion template
 */
var LimeGoldTemplateLayout = function () {
    var _a = (0, hooks_1.useCommonTemplateState)(limegoldTemplateReducer), isResizing = _a.isResizing, locale = _a.locale, capabilities = _a.capabilities, showSelection = _a.showSelection, showLegend = _a.showLegend, showTaskPane = _a.showTaskPane, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onSplitterChanged = _a.onSplitterChanged, onActiveElementChanged = _a.onActiveElementChanged;
    var hasTaskPane = false;
    var hasStatusBar = false;
    var hasNavigator = false;
    var hasSelectionPanel = false;
    var hasLegend = false;
    if (capabilities) {
        hasTaskPane = capabilities.hasTaskPane;
        hasStatusBar = capabilities.hasStatusBar;
        hasNavigator = capabilities.hasNavigator;
        hasSelectionPanel = capabilities.hasSelectionPanel;
        hasLegend = capabilities.hasLegend;
    }
    var bottomOffset = hasStatusBar ? STATUS_BAR_HEIGHT : 0;
    var topOffset = (TOP_BAR_HEIGHT + (toolbar_1.DEFAULT_TOOLBAR_SIZE * 2));
    var initInfoPaneWidth = (0, hooks_2.useTemplateInitialInfoPaneWidth)();
    var initTaskPaneWidth = (0, hooks_2.useTemplateInitialTaskPaneWidth)();
    var sbWidth = Math.max(initInfoPaneWidth, initTaskPaneWidth);
    var tabPanelStyle = {
        position: "absolute",
        top: TAB_BAR_HEIGHT,
        left: 0,
        right: 0,
        bottom: 0
    };
    var states = [
        { id: "Selection", visible: showSelection },
        { id: "TaskPane", visible: showTaskPane },
        { id: "Legend", visible: showLegend }
    ];
    var active = states.filter(function (st) { return st.visible; });
    var extraTabsProps = {};
    if (active.length == 1) {
        extraTabsProps.selectedTabId = active[0].id;
    }
    var taskPaneTitle = (0, i18n_1.tr)("TPL_TITLE_TASKPANE", locale);
    var legendTitle = (0, i18n_1.tr)("TPL_TITLE_LEGEND", locale);
    var selectionTitle = (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", locale);
    var TB_Z_INDEX = 0;
    return React.createElement("div", { style: { width: "100%", height: "100%" } },
        React.createElement(toolbar_2.ToolbarContainer, { id: "FileMenu", containerClass: "limegold-file-menu", containerStyle: { position: "absolute", left: 0, top: ((TOP_BAR_HEIGHT - toolbar_1.DEFAULT_TOOLBAR_SIZE) / 2), zIndex: TB_Z_INDEX, right: 0 } }),
        React.createElement(toolbar_2.ToolbarContainer, { id: "Toolbar", containerClass: "limegold-toolbar", containerStyle: { position: "absolute", left: 0, top: TOP_BAR_HEIGHT, zIndex: TB_Z_INDEX, right: 0 } }),
        React.createElement(toolbar_2.ToolbarContainer, { id: "ToolbarSecondary", containerClass: "limegold-toolbar-secondary", containerStyle: { position: "absolute", left: 0, top: (TOP_BAR_HEIGHT + toolbar_1.DEFAULT_TOOLBAR_SIZE), zIndex: TB_Z_INDEX, right: 0 } }),
        React.createElement("div", { style: { position: "absolute", left: 0, top: topOffset, bottom: (bottomOffset + SIDEBAR_PADDING), right: 0 } },
            React.createElement(react_splitter_layout_1.default, { customClassName: "limegold-splitter", primaryIndex: 0, secondaryInitialSize: sbWidth, onSecondaryPaneSizeChange: onSplitterChanged, onDragStart: onDragStart, onDragEnd: onDragEnd },
                React.createElement("div", { style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 } },
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Map, locale: locale }),
                    (function () {
                        if (hasNavigator) {
                            return React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Navigator, locale: locale });
                        }
                    })()),
                (function () {
                    if (showSelection || showTaskPane || showLegend) {
                        return React.createElement("div", { className: "limegold-sidebar", style: { position: "absolute", right: SIDEBAR_PADDING, top: 0, left: 0, bottom: 0 } },
                            React.createElement(core_1.Tabs, tslib_1.__assign({ className: "limegold-sidebar-tabs", id: "SidebarTabs", onChange: onActiveElementChanged }, extraTabsProps),
                                (function () {
                                    if (hasTaskPane) {
                                        var panel = React.createElement("div", { style: tabPanelStyle },
                                            React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.TaskPane, locale: locale, componentProps: { isResizing: isResizing } }));
                                        return React.createElement(core_1.Tab, { id: "TaskPane", title: taskPaneTitle, panel: panel });
                                    }
                                })(),
                                (function () {
                                    if (hasLegend) {
                                        var p1 = { overflow: "auto" };
                                        var panel = React.createElement("div", { style: tslib_1.__assign(tslib_1.__assign({}, tabPanelStyle), p1) },
                                            React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Legend, locale: locale, componentProps: DEFAULT_LEGEND_COMPONENT_PROPS }));
                                        return React.createElement(core_1.Tab, { id: "Legend", title: legendTitle, panel: panel });
                                    }
                                })(),
                                (function () {
                                    if (hasSelectionPanel) {
                                        var panel = React.createElement("div", { style: tabPanelStyle },
                                            React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectionPanel, locale: locale }));
                                        return React.createElement(core_1.Tab, { id: "Selection", title: selectionTitle, panel: panel });
                                    }
                                })()));
                    }
                })())),
        (function () {
            if (hasStatusBar) {
                return React.createElement("div", { className: "limegold-status-bar", style: { position: "absolute", left: 0, bottom: 0, right: 0, height: bottomOffset } },
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.MouseCoordinates, locale: locale }),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.ScaleDisplay, locale: locale }),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectedFeatureCount, locale: locale }),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.ViewSize, locale: locale }),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.PoweredByMapGuide, locale: locale }));
            }
        })(),
        React.createElement(viewer_shim_1.ViewerApiShim, null),
        React.createElement(modal_launcher_1.ModalLauncher, null),
        React.createElement(flyout_region_1.FlyoutRegionContainer, null),
        React.createElement(init_warning_display_1.InitWarningDisplay, null));
};
exports.LimeGoldTemplateLayout = LimeGoldTemplateLayout;
//# sourceMappingURL=limegold.js.map