"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarLayout = 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("../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 init_warning_display_1 = require("../containers/init-warning-display");
var actions_1 = require("../constants/actions");
var core_1 = require("@blueprintjs/core");
var hooks_1 = require("../containers/hooks");
var hooks_2 = require("./hooks");
var template_1 = require("../reducers/template");
var constants_1 = require("../constants");
var ismobilejs_1 = tslib_1.__importDefault(require("ismobilejs"));
var template_2 = require("../actions/template");
var DEFAULT_LEGEND_COMPONENT_PROPS = { inlineBaseLayerSwitcher: true };
function sidebarTemplateReducer(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) {
                    var autoExpandSelectionPanel = origState.autoDisplaySelectionPanelOnSelection;
                    var ism = (0, ismobilejs_1.default)(navigator.userAgent);
                    if (ism.phone) {
                        return origState; //Take no action on mobile
                    }
                    if (selection.SelectedFeatures.SelectedLayer.length && autoExpandSelectionPanel) {
                        return tslib_1.__assign(tslib_1.__assign({}, origState), { selectionPanelVisible: true, taskPaneVisible: false, legendVisible: false });
                    }
                }
                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) {
                    var autoExpandSelectionPanel = origState.autoDisplaySelectionPanelOnSelection;
                    var ism = (0, ismobilejs_1.default)(navigator.userAgent);
                    if (ism.phone) {
                        return origState; //Take no action on mobile
                    }
                    if (autoExpandSelectionPanel) {
                        return tslib_1.__assign(tslib_1.__assign({}, origState), { selectionPanelVisible: true, taskPaneVisible: false, legendVisible: false });
                    }
                }
            }
        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 SidebarHeader = function (props) {
    var sbHeaderStyle = {
        position: "absolute",
        top: 0,
        right: 0,
        height: 40,
        left: 0,
        margin: 0
    };
    sbHeaderStyle.paddingLeft = 10;
    return React.createElement("h1", { style: sbHeaderStyle, className: "sidebar-header" },
        props.text,
        React.createElement("span", { className: "sidebar-close", onClick: props.onCloseClick },
            React.createElement("i", { className: "icon-left-open" })));
};
var Sidebar = function (props) {
    var onActivateTasks = function (e) {
        var onActivateTab = props.onActivateTab;
        e.preventDefault();
        onActivateTab("tasks");
        return false;
    };
    var onActivateLegend = function (e) {
        var onActivateTab = props.onActivateTab;
        e.preventDefault();
        onActivateTab("legend");
        return false;
    };
    var onActivateSelection = function (e) {
        var onActivateTab = props.onActivateTab;
        e.preventDefault();
        onActivateTab("selection");
        return false;
    };
    var onClickCollapse = function (e) {
        var onCollapse = props.onCollapse;
        e.preventDefault();
        onCollapse();
        return false;
    };
    var onClickExpand = function (e) {
        var onExpand = props.onExpand;
        e.preventDefault();
        onExpand();
        return false;
    };
    var lastAction = (0, hooks_1.useLastDispatchedAction)();
    React.useEffect(function () {
        switch (lastAction.type) {
            case actions_1.ActionType.TASK_INVOKE_URL:
                {
                    props.onActivateTab("tasks", false);
                }
                break;
            case actions_1.ActionType.MAP_SET_SELECTION:
            case actions_1.ActionType.MAP_ADD_CLIENT_SELECTED_FEATURE:
                break;
        }
    }, [lastAction]);
    var position = props.position, busy = props.busy, collapsed = props.collapsed, activeTab = props.activeTab;
    return React.createElement("div", { className: "sidebar ".concat(collapsed ? "collapsed" : "", " sidebar-").concat(position) },
        React.createElement("div", { className: "sidebar-tabs" },
            React.createElement("ul", { role: "tablist" },
                React.createElement("li", null, (function () {
                    if (busy === true) {
                        return React.createElement("a", null,
                            React.createElement(core_1.Spinner, { intent: core_1.Intent.WARNING, size: core_1.Spinner.SIZE_SMALL }));
                    }
                    else {
                        if (collapsed) {
                            return React.createElement("a", { onClick: onClickExpand },
                                React.createElement(core_1.Icon, { icon: "menu-open" }));
                        }
                        else {
                            return React.createElement("a", { onClick: onClickCollapse },
                                React.createElement(core_1.Icon, { icon: "menu-closed" }));
                        }
                    }
                })()),
                (function () {
                    if (props.taskpane) {
                        return React.createElement("li", { className: collapsed == false && activeTab == "tasks" ? "active" : "" },
                            React.createElement("a", { onClick: onActivateTasks, title: (0, i18n_1.tr)("TPL_SIDEBAR_OPEN_TASKPANE", props.locale), role: "tab" },
                                React.createElement(core_1.Icon, { icon: "application" })));
                    }
                })(),
                (function () {
                    if (props.legend) {
                        return React.createElement("li", { className: collapsed == false && activeTab == "legend" ? "active" : "" },
                            React.createElement("a", { onClick: onActivateLegend, title: (0, i18n_1.tr)("TPL_SIDEBAR_OPEN_LEGEND", props.locale), role: "tab" },
                                React.createElement(core_1.Icon, { icon: "layers" })));
                    }
                })(),
                (function () {
                    if (props.selection) {
                        return React.createElement("li", { className: collapsed == false && activeTab == "selection" ? "active" : "" },
                            React.createElement("a", { onClick: onActivateSelection, title: (0, i18n_1.tr)("TPL_SIDEBAR_OPEN_SELECTION_PANEL", props.locale), role: "tab" },
                                React.createElement(core_1.Icon, { icon: "th" })),
                            props.hasSelection && React.createElement("div", { className: "sidebar-has-selection-badge" }, constants_1.NBSP));
                    }
                })(),
                React.createElement("li", { className: "sidebar-separator" }))),
        React.createElement("div", { className: "sidebar-content" },
            (function () {
                if (props.taskpane) {
                    return React.createElement("div", { className: "sidebar-pane ".concat(activeTab == "tasks" ? "active" : "") },
                        React.createElement(SidebarHeader, { text: (0, i18n_1.tr)("TPL_TITLE_TASKPANE", props.locale), onCloseClick: onClickCollapse }),
                        React.createElement("div", { style: { position: "absolute", top: 40, bottom: 0, right: 0, left: 0 } },
                            React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.TaskPane, locale: props.locale })));
                }
            })(),
            (function () {
                if (props.legend) {
                    return React.createElement("div", { className: "sidebar-pane ".concat(activeTab == "legend" ? "active" : "") },
                        React.createElement(SidebarHeader, { text: (0, i18n_1.tr)("TPL_TITLE_LEGEND", props.locale), onCloseClick: onClickCollapse }),
                        React.createElement("div", { style: { position: "absolute", top: 40, bottom: 0, right: 0, left: 0, overflow: "auto" } },
                            React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Legend, locale: props.locale, componentProps: DEFAULT_LEGEND_COMPONENT_PROPS })));
                }
            })(),
            (function () {
                if (props.selection) {
                    return React.createElement("div", { className: "sidebar-pane ".concat(activeTab == "selection" ? "active" : "") },
                        React.createElement(SidebarHeader, { text: (0, i18n_1.tr)("TPL_TITLE_SELECTION_PANEL", props.locale), onCloseClick: onClickCollapse }),
                        React.createElement("div", { style: { position: "absolute", top: 40, bottom: 0, right: 0, left: 0 } },
                            React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectionPanel, locale: props.locale })));
                }
            })()));
};
/**
 * A viewer template that is based on the design of the {@link https://github.com/Turbo87/sidebar-v2 Sidebar Map Layout}
 */
var SidebarLayout = function () {
    var _a = (0, hooks_2.useCommonTemplateState)(sidebarTemplateReducer), dispatch = _a.dispatch, locale = _a.locale, capabilities = _a.capabilities, showSelection = _a.showSelection, showLegend = _a.showLegend, showTaskPane = _a.showTaskPane;
    var tbState = (0, hooks_1.useReducedToolbarAppState)();
    var setElementStatesAction = function (states) { return dispatch((0, template_2.setElementStates)(states)); };
    //console.log(`leg: ${showLegend}, sel: ${showSelection}, task: ${showTaskPane}`);
    var hasTaskPane = capabilities.hasTaskPane, hasStatusBar = capabilities.hasStatusBar, hasNavigator = capabilities.hasNavigator, hasSelectionPanel = capabilities.hasSelectionPanel, hasLegend = capabilities.hasLegend, hasViewSize = capabilities.hasViewSize, hasToolbar = capabilities.hasToolbar;
    var busyCount = (0, hooks_1.useViewerBusyCount)();
    var defaultActiveTab = "tasks";
    if (showLegend) {
        defaultActiveTab = "legend";
    }
    else if (showSelection) {
        defaultActiveTab = "selection";
    }
    var _b = React.useState(defaultActiveTab), activeTab = _b[0], setActiveTab = _b[1];
    // Need to apply an effect to update active tab from element states in the redux store
    React.useEffect(function () {
        var tab = "tasks";
        if (showLegend) {
            tab = "legend";
        }
        else if (showSelection) {
            tab = "selection";
        }
        setActiveTab(tab);
    }, [showLegend, showSelection, showTaskPane]);
    var onCollapse = function () {
        setElementStatesAction({
            taskPaneVisible: false,
            legendVisible: false,
            selectionPanelVisible: false
        });
    };
    var onExpand = function () {
        var est = {
            legendVisible: false,
            selectionPanelVisible: false,
            taskPaneVisible: false
        };
        switch (activeTab) {
            case "legend":
                est.legendVisible = true;
                break;
            case "selection":
                est.selectionPanelVisible = true;
                break;
            case "tasks":
                est.taskPaneVisible = true;
                break;
        }
        if (est.legendVisible || est.selectionPanelVisible || est.taskPaneVisible) {
            setElementStatesAction(est);
        }
    };
    var onActivateTab = function (tab) {
        var est = {
            legendVisible: false,
            selectionPanelVisible: false,
            taskPaneVisible: false
        };
        switch (tab) {
            case "legend":
                est.legendVisible = true;
                break;
            case "selection":
                est.selectionPanelVisible = true;
                break;
            case "tasks":
                est.taskPaneVisible = true;
                break;
        }
        if (est.legendVisible || est.selectionPanelVisible || est.taskPaneVisible) {
            setElementStatesAction(est);
            setActiveTab(tab);
        }
    };
    var collapsed = !(showLegend || showSelection || showTaskPane);
    return React.createElement("div", { style: { width: "100%", height: "100%" } },
        React.createElement(Sidebar, { position: "left", busy: busyCount > 0, legend: hasLegend, selection: hasSelectionPanel, taskpane: hasTaskPane, hasSelection: tbState.hasSelection || tbState.hasClientSelection, locale: locale, collapsed: collapsed || false, activeTab: activeTab || "tasks", onCollapse: onCollapse, onActivateTab: onActivateTab, onExpand: onExpand }),
        (function () {
            if (hasToolbar) {
                var top_1 = 180;
                if (!hasSelectionPanel) {
                    top_1 -= 40;
                }
                if (!hasLegend) {
                    top_1 -= 40;
                }
                if (!hasTaskPane) {
                    top_1 -= 40;
                }
                return React.createElement("div", { id: "toolbar-region", style: { top: top_1 } },
                    React.createElement(toolbar_1.ToolbarContainer, { id: constants_1.WEBLAYOUT_TOOLBAR, containerClass: "sidebar-toolbar", vertical: true, hideVerticalLabels: true, containerStyle: { position: "absolute", left: 4, right: 6, zIndex: 100 } }));
            }
        })(),
        (function () {
            if (hasNavigator) {
                return React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Navigator, locale: locale });
            }
        })(),
        (function () {
            if (hasStatusBar) {
                return React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.MouseCoordinates, locale: locale });
            }
        })(),
        (function () {
            if (hasStatusBar) {
                return React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.ScaleDisplay, locale: locale });
            }
        })(),
        (function () {
            if (hasViewSize) {
                return React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.ViewSize, locale: locale });
            }
        })(),
        (function () {
            if (hasStatusBar) {
                return React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.SelectedFeatureCount, 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),
        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.Map, locale: locale }),
        React.createElement(component_1.PlaceholderComponent, { id: component_1.DefaultComponentNames.PoweredByMapGuide, locale: locale }));
};
exports.SidebarLayout = SidebarLayout;
//# sourceMappingURL=sidebar.js.map