"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SlateTemplateLayout = 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 accordion_1 = require("../components/accordion");
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 hooks_1 = require("./hooks");
var hooks_2 = require("../containers/hooks");
function slateTemplateReducer(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 STATUS_BAR_HEIGHT = 18;
var ACCORDION_STYLE = { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 };
var DEFAULT_LEGEND_COMPONENT_PROPS = { inlineBaseLayerSwitcher: false };
/**
 * A viewer template that resembles the Slate Fusion template
 */
var SlateTemplateLayout = function () {
    var _a = (0, hooks_1.useCommonTemplateState)(slateTemplateReducer), 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 hasStatusBar = false;
    var hasNavigator = false;
    if (capabilities) {
        hasStatusBar = capabilities.hasStatusBar;
        hasNavigator = capabilities.hasNavigator;
    }
    var initInfoPaneWidth = (0, hooks_2.useTemplateInitialInfoPaneWidth)();
    var initTaskPaneWidth = (0, hooks_2.useTemplateInitialTaskPaneWidth)();
    var sbWidth = Math.max(initInfoPaneWidth, initTaskPaneWidth);
    var bottomOffset = hasStatusBar ? STATUS_BAR_HEIGHT : 0;
    var topOffset = (toolbar_1.DEFAULT_TOOLBAR_SIZE * 3);
    var panels = React.useMemo(function () { return [
        {
            id: "Legend",
            title: (0, i18n_1.tr)("TPL_TITLE_LEGEND", locale),
            contentRenderer: function (dim) {
                return React.createElement("div", { style: { width: dim.width, height: dim.height, overflowY: "auto" } },
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Legend, locale: locale, componentProps: DEFAULT_LEGEND_COMPONENT_PROPS }));
            }
        },
        {
            id: "Selection",
            title: (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", locale),
            contentRenderer: function (dim) {
                return React.createElement("div", { style: { width: dim.width, height: dim.height, overflowY: "auto" } },
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectionPanel, locale: locale }));
            }
        },
        {
            id: "TaskPane",
            title: (0, i18n_1.tr)("TPL_TITLE_TASKPANE", locale),
            contentRenderer: function (dim, isResizing) {
                return React.createElement("div", { style: { width: dim.width, height: dim.height, overflowY: "auto" } },
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.TaskPane, locale: locale, componentProps: { isResizing: isResizing } }));
            }
        }
    ]; }, [locale]);
    var activeId;
    var states = [
        { id: "Selection", visible: showSelection },
        { id: "TaskPane", visible: showTaskPane },
        { id: "Legend", visible: showLegend }
    ];
    var active = states.filter(function (st) { return st.visible; });
    if (active.length == 1) {
        activeId = active[0].id;
    }
    var TB_Z_INDEX = 0;
    return React.createElement("div", { style: { width: "100%", height: "100%" } },
        React.createElement("div", { style: { position: "absolute", left: 0, top: 0, bottom: bottomOffset, right: 0 } },
            React.createElement(react_splitter_layout_1.default, { customClassName: "slate-splitter", primaryIndex: 1, secondaryInitialSize: sbWidth, onSecondaryPaneSizeChange: onSplitterChanged, onDragStart: onDragStart, onDragEnd: onDragEnd },
                (function () {
                    if (showSelection || showTaskPane || showLegend) {
                        return React.createElement("div", null,
                            React.createElement(accordion_1.Accordion, { style: ACCORDION_STYLE, onActivePanelChanged: onActiveElementChanged, activePanelId: activeId, panels: panels, isResizing: isResizing }));
                    }
                })(),
                React.createElement("div", null,
                    React.createElement(toolbar_2.ToolbarContainer, { id: "FileMenu", containerClass: "slate-file-menu", containerStyle: { position: "absolute", left: 0, top: 0, zIndex: TB_Z_INDEX, right: 0 } }),
                    React.createElement(toolbar_2.ToolbarContainer, { id: "Toolbar", containerClass: "slate-toolbar", containerStyle: { position: "absolute", left: 0, top: toolbar_1.DEFAULT_TOOLBAR_SIZE, zIndex: TB_Z_INDEX, right: 0 } }),
                    React.createElement(toolbar_2.ToolbarContainer, { id: "ToolbarSecondary", containerClass: "slate-toolbar-secondary", containerStyle: { position: "absolute", left: 0, top: (toolbar_1.DEFAULT_TOOLBAR_SIZE * 2), zIndex: TB_Z_INDEX, right: 0 } }),
                    React.createElement("div", { style: { position: "absolute", left: 0, right: 0, top: topOffset, 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 });
                            }
                        })()),
                    React.createElement(viewer_shim_1.ViewerApiShim, null)))),
        (function () {
            if (hasStatusBar) {
                return React.createElement("div", { className: "slate-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(modal_launcher_1.ModalLauncher, null),
        React.createElement(flyout_region_1.FlyoutRegionContainer, null),
        React.createElement(init_warning_display_1.InitWarningDisplay, null));
};
exports.SlateTemplateLayout = SlateTemplateLayout;
//# sourceMappingURL=slate.js.map