"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AjaxViewerLayout = 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 flyout_region_1 = require("../containers/flyout-region");
var viewer_shim_1 = require("../containers/viewer-shim");
var modal_launcher_1 = require("../containers/modal-launcher");
var init_warning_display_1 = require("../containers/init-warning-display");
var react_splitter_layout_1 = tslib_1.__importDefault(require("react-splitter-layout"));
var i18n_1 = require("../api/i18n");
var hooks_1 = require("./hooks");
var hooks_2 = require("../containers/hooks");
var constants_1 = require("../constants");
var DEFAULT_LEGEND_COMPONENT_PROPS = { inlineBaseLayerSwitcher: true };
/**
 * A viewer template that resembles the MapGuide AJAX viewer
 */
var AjaxViewerLayout = function () {
    var _a = (0, hooks_1.useCommonTemplateState)(), isResizing = _a.isResizing, locale = _a.locale, capabilities = _a.capabilities, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onSplitterChanged = _a.onSplitterChanged;
    var initInfoPaneWidth = (0, hooks_2.useTemplateInitialInfoPaneWidth)();
    var initTaskPaneWidth = (0, hooks_2.useTemplateInitialTaskPaneWidth)();
    var hasToolbar = false;
    var hasTaskPane = false;
    var hasStatusBar = false;
    var hasNavigator = false;
    var hasSelectionPanel = false;
    var hasLegend = false;
    if (capabilities) {
        hasToolbar = capabilities.hasToolbar;
        hasTaskPane = capabilities.hasTaskPane;
        hasStatusBar = capabilities.hasStatusBar;
        hasNavigator = capabilities.hasNavigator;
        hasSelectionPanel = capabilities.hasSelectionPanel;
        hasLegend = capabilities.hasLegend;
    }
    var TB_Z_INDEX = 10;
    var topOffset = hasToolbar ? toolbar_1.DEFAULT_TOOLBAR_SIZE : 0;
    var bottomOffset = hasStatusBar ? 20 : 0;
    var lgStyle = {};
    var selStyle = {};
    return React.createElement("div", { style: { width: "100%", height: "100%" } },
        React.createElement("div", { style: { position: "absolute", left: 0, right: 0, top: 0, bottom: bottomOffset } },
            React.createElement(react_splitter_layout_1.default, { customClassName: "ajax-viewer-splitter", primaryIndex: 0, secondaryInitialSize: initTaskPaneWidth, onDragStart: onDragStart, onDragEnd: onDragEnd },
                React.createElement("div", null,
                    (function () {
                        if (hasToolbar) {
                            return React.createElement(toolbar_2.ToolbarContainer, { id: constants_1.WEBLAYOUT_TOOLBAR, containerStyle: { position: "absolute", left: 0, top: 0, right: 0, zIndex: TB_Z_INDEX, backgroundColor: toolbar_1.TOOLBAR_BACKGROUND_COLOR } });
                        }
                    })(),
                    React.createElement("div", { style: { position: "absolute", left: 0, top: topOffset, bottom: 0, right: 0 } },
                        React.createElement(react_splitter_layout_1.default, { customClassName: "ajax-viewer-splitter", primaryIndex: 1, secondaryInitialSize: initInfoPaneWidth, onSecondaryPaneSizeChange: onSplitterChanged },
                            (function () {
                                if (hasLegend || hasSelectionPanel) {
                                    return React.createElement(react_splitter_layout_1.default, { customClassName: "ajax-viewer-splitter", vertical: true, onDragStart: onDragStart, onDragEnd: onDragEnd },
                                        (function () {
                                            if (hasLegend) {
                                                return React.createElement("div", { className: "ajax-sidebar-panel", style: lgStyle },
                                                    React.createElement("div", { className: "ajax-sidebar-panel-heading" },
                                                        React.createElement("p", null, (0, i18n_1.tr)("TPL_TITLE_LEGEND", locale))),
                                                    React.createElement("div", { className: "ajax-sidebar-panel-body" },
                                                        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Legend, locale: locale, componentProps: DEFAULT_LEGEND_COMPONENT_PROPS })));
                                            }
                                        })(),
                                        (function () {
                                            if (hasSelectionPanel) {
                                                return React.createElement("div", { className: "ajax-sidebar-panel", style: selStyle },
                                                    React.createElement("div", { className: "ajax-sidebar-panel-heading" },
                                                        React.createElement("p", null, (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", locale))),
                                                    React.createElement("div", { className: "ajax-sidebar-panel-body" },
                                                        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectionPanel, locale: locale })));
                                            }
                                        })());
                                }
                            })(),
                            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 (hasTaskPane) {
                        return React.createElement(component_1.PlaceholderComponent, { locale: locale, id: component_1.DefaultComponentNames.TaskPane, componentProps: { isResizing: isResizing } });
                    }
                })())),
        (function () {
            if (hasStatusBar) {
                return React.createElement("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, height: bottomOffset, backgroundColor: toolbar_1.TOOLBAR_BACKGROUND_COLOR } },
                    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.ViewSize, locale: locale }),
                    React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectedFeatureCount, 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.AjaxViewerLayout = AjaxViewerLayout;
//# sourceMappingURL=ajax-viewer.js.map