"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AquaTemplateLayout = 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 modal_dialog_1 = require("../components/modal-dialog");
var i18n_1 = require("../api/i18n");
var init_warning_display_1 = require("../containers/init-warning-display");
var actions_1 = require("../constants/actions");
var hooks_1 = require("./hooks");
var hooks_2 = require("../containers/hooks");
var template_1 = require("../actions/template");
var hooks_mapguide_1 = require("../containers/hooks-mapguide");
var hooks_generic_1 = require("../containers/hooks-generic");
function aquaTemplateReducer(origState, state, action) {
    switch (action.type) {
        case actions_1.ActionType.MAP_SET_SELECTION:
            {
                //This is the only template that does not conform to the selection/legend/taskpane is a mutually
                //exclusive visible set. We take advantage of the custom template reducer function to apply the
                //correct visibility state against the *original state* effectively discarding whatever the root
                //template reducer has done against this action.
                var selection = action.payload.selection;
                if (selection && selection.SelectedFeatures) {
                    if (selection.SelectedFeatures.SelectedLayer.length && origState.autoDisplaySelectionPanelOnSelection) {
                        return tslib_1.__assign(tslib_1.__assign({}, origState), { selectionPanelVisible: true });
                    }
                }
                return state; //No action taken: Return "current" state
            }
        case actions_1.ActionType.MAP_ADD_CLIENT_SELECTED_FEATURE:
            {
                //This is the only template that does not conform to the selection/legend/taskpane is a mutually
                //exclusive visible set. We take advantage of the custom template reducer function to apply the
                //correct visibility state against the *original state* effectively discarding whatever the root
                //template reducer has done against this action.
                var feature = action.payload.feature;
                if (feature === null || feature === void 0 ? void 0 : feature.properties) {
                    return tslib_1.__assign(tslib_1.__assign({}, origState), { selectionPanelVisible: true });
                }
                return state; //No action taken: Return "current" state
            }
        case actions_1.ActionType.FUSION_SET_LEGEND_VISIBILITY:
            {
                var data = action.payload;
                if (typeof (data) == "boolean") {
                    var 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 = { selectionPanelVisible: data };
                    return tslib_1.__assign(tslib_1.__assign({}, state), state1);
                }
            }
        case actions_1.ActionType.TASK_INVOKE_URL:
            {
                var state1 = { taskPaneVisible: true };
                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 = { taskPaneVisible: data };
                    return tslib_1.__assign(tslib_1.__assign({}, state), state1);
                }
            }
    }
    return state;
}
var SELECTION_DIALOG_HEIGHT = 300;
var LEGEND_DIALOG_HEIGHT = 400;
var TASK_DIALOG_HEIGHT = 500;
var STATUS_BAR_HEIGHT = 18;
/**
 * A viewer template that resembles the Aqua Fusion template
 */
var AquaTemplateLayout = function () {
    var _a = (0, hooks_1.useCommonTemplateState)(aquaTemplateReducer), locale = _a.locale, capabilities = _a.capabilities, showSelection = _a.showSelection, showLegend = _a.showLegend, showTaskPane = _a.showTaskPane, dispatch = _a.dispatch;
    var posLegend = (0, hooks_2.useTemplateCustomData)("AQUA_LEGEND_POS");
    var sizeLegend = (0, hooks_2.useTemplateCustomData)("AQUA_LEGEND_SIZE");
    var posSelection = (0, hooks_2.useTemplateCustomData)("AQUA_SELECTION_POS");
    var sizeSelection = (0, hooks_2.useTemplateCustomData)("AQUA_SELECTION_SIZE");
    var posTaskPane = (0, hooks_2.useTemplateCustomData)("AQUA_TASKPANE_POS");
    var sizeTaskPane = (0, hooks_2.useTemplateCustomData)("AQUA_TASKPANE_SIZE");
    var map = (0, hooks_mapguide_1.useActiveMapState)();
    var subject = (0, hooks_generic_1.useActiveMapSubjectLayer)();
    var hideLegend = function () { return dispatch((0, template_1.setLegendVisibility)(false)); };
    var hideSelection = function () { return dispatch((0, template_1.setSelectionPanelVisibility)(false)); };
    var hideTaskPane = function () { return dispatch((0, template_1.setTaskPaneVisibility)(false)); };
    var onHideTaskPane = function () { return hideTaskPane(); };
    var onHideLegend = function () { return hideLegend(); };
    var onHideSelection = function () { return hideSelection(); };
    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 left = toolbar_1.DEFAULT_TOOLBAR_SIZE;
    var right = 0;
    /*
    if (hasLegend || hasSelectionPanel) {
        left = sbWidth;
    }
    if (hasTaskPane) {
        right = tpWidth;
    }*/
    var TB_Z_INDEX = 0;
    var initInfoPaneWidth = (0, hooks_2.useTemplateInitialInfoPaneWidth)();
    var initTaskPaneWidth = (0, hooks_2.useTemplateInitialTaskPaneWidth)();
    return React.createElement("div", { style: { width: "100%", height: "100%" } },
        React.createElement(toolbar_2.ToolbarContainer, { id: "FileMenu", containerClass: "aqua-file-menu", containerStyle: { position: "absolute", left: 0, top: 0, zIndex: TB_Z_INDEX, right: 0 } }),
        React.createElement(toolbar_2.ToolbarContainer, { id: "Toolbar", containerClass: "aqua-toolbar", containerStyle: { position: "absolute", left: 0, top: toolbar_1.DEFAULT_TOOLBAR_SIZE, height: toolbar_1.DEFAULT_TOOLBAR_SIZE, zIndex: TB_Z_INDEX, right: 0 } }),
        React.createElement(toolbar_2.ToolbarContainer, { id: "ToolbarVertical", containerClass: "aqua-toolbar-vertical", vertical: true, containerStyle: { position: "absolute", left: 0, top: ((toolbar_1.DEFAULT_TOOLBAR_SIZE * 2) - 1), zIndex: TB_Z_INDEX, bottom: bottomOffset } }),
        React.createElement("div", { style: { position: "absolute", left: left, top: (toolbar_1.DEFAULT_TOOLBAR_SIZE * 2), bottom: bottomOffset, right: right } },
            (function () {
                //NOTE: We have to delay render this behind an IIFE because otherwise this component may be mounted with
                //sidebar elements not being ready, which may result in a distorted OL map when it mounts, requiring a updateSize()
                //call to fix
                var theMap = map !== null && map !== void 0 ? map : subject;
                if (theMap) {
                    return 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 (hasStatusBar) {
                return React.createElement("div", { className: "aqua-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,
            (function () {
                if (hasSelectionPanel) {
                    var pos = posSelection !== null && posSelection !== void 0 ? posSelection : [40, 500];
                    var size = sizeSelection !== null && sizeSelection !== void 0 ? sizeSelection : [initInfoPaneWidth, SELECTION_DIALOG_HEIGHT];
                    return React.createElement(modal_dialog_1.RndModalDialog, { icon: "th", locale: locale, isOpen: !!showSelection, onClose: onHideSelection, title: (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", locale), onChange: function (args) {
                            dispatch((0, template_1.setTemplateCustomData)("AQUA_SELECTION_POS", [args.x, args.y]));
                            dispatch((0, template_1.setTemplateCustomData)("AQUA_SELECTION_SIZE", [args.width, args.height]));
                        }, x: pos[0], y: pos[1], width: size[0], height: size[1], disableYOverflow: true, enableInteractionMask: true }, function (_a) {
                        var h = _a[1];
                        return React.createElement(component_1.PlaceholderComponent, { locale: locale, id: component_1.DefaultComponentNames.SelectionPanel, componentProps: { maxHeight: h } });
                    });
                }
            })(),
            (function () {
                if (hasLegend) {
                    var pos = posLegend !== null && posLegend !== void 0 ? posLegend : [40, 70];
                    var size = sizeLegend !== null && sizeLegend !== void 0 ? sizeLegend : [initInfoPaneWidth, LEGEND_DIALOG_HEIGHT];
                    return React.createElement(modal_dialog_1.RndModalDialog, { icon: "layers", locale: locale, isOpen: !!showLegend, onClose: onHideLegend, title: (0, i18n_1.tr)("TPL_TITLE_LEGEND", locale), onChange: function (args) {
                            dispatch((0, template_1.setTemplateCustomData)("AQUA_LEGEND_POS", [args.x, args.y]));
                            dispatch((0, template_1.setTemplateCustomData)("AQUA_LEGEND_SIZE", [args.width, args.height]));
                        }, x: pos[0], y: pos[1], width: size[0], height: size[1], enableInteractionMask: true }, function (_a) {
                        var h = _a[1];
                        return React.createElement(component_1.PlaceholderComponent, { locale: locale, id: component_1.DefaultComponentNames.Legend, componentProps: { inlineBaseLayerSwitcher: false, maxHeight: h } });
                    });
                }
            })(),
            (function () {
                if (hasTaskPane) {
                    var pos = posTaskPane !== null && posTaskPane !== void 0 ? posTaskPane : [document.body.clientWidth - initTaskPaneWidth - 70, 80];
                    var size = sizeTaskPane !== null && sizeTaskPane !== void 0 ? sizeTaskPane : [initTaskPaneWidth, TASK_DIALOG_HEIGHT];
                    return React.createElement(modal_dialog_1.RndModalDialog, { icon: "application", locale: locale, isOpen: !!showTaskPane, onClose: onHideTaskPane, onChange: function (args) {
                            dispatch((0, template_1.setTemplateCustomData)("AQUA_TASKPANE_POS", [args.x, args.y]));
                            dispatch((0, template_1.setTemplateCustomData)("AQUA_TASKPANE_SIZE", [args.width, args.height]));
                        }, width: size[0], height: size[1], title: (0, i18n_1.tr)("TPL_TITLE_TASKPANE", locale), x: pos[0], y: pos[1], disableYOverflow: true, enableInteractionMask: false }, function (_a) {
                        var h = _a[1];
                        return React.createElement(component_1.PlaceholderComponent, { locale: locale, id: component_1.DefaultComponentNames.TaskPane, componentProps: { maxHeight: h - 15 /* some height breathing space */ } });
                    });
                }
            })()),
        React.createElement(flyout_region_1.FlyoutRegionContainer, null),
        React.createElement(init_warning_display_1.InitWarningDisplay, null));
};
exports.AquaTemplateLayout = AquaTemplateLayout;
//# sourceMappingURL=aqua.js.map