"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCommonTemplateState = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var hooks_1 = require("../containers/hooks");
var template_1 = require("../reducers/template");
var runtime_1 = require("../api/runtime");
var template_2 = require("../actions/template");
var context_1 = require("../components/map-providers/context");
function useCommonTemplateState(templateReducer) {
    //TODO: To promote more reusability, the resizing flag should be defined and set on a 
    //dispatcher-defined basis.
    //
    //ie. A template could have more than 1 resizing flag. Right now, the AJAX viewer template is
    //one such template, which awkwardly shows "Task Pane is resizing" UI when resizing the info pane
    //(on the opposite side of the task pane!) due to this current limitation when it uses this hook
    var _a = React.useState(false), isResizing = _a[0], setIsResizing = _a[1];
    var locale = (0, hooks_1.useViewerLocale)();
    var capabilities = (0, hooks_1.useConfiguredCapabilities)();
    var showSelection = (0, hooks_1.useTemplateSelectionVisible)();
    var showLegend = (0, hooks_1.useTemplateLegendVisible)();
    var showTaskPane = (0, hooks_1.useTemplateTaskPaneVisible)();
    var dispatch = (0, context_1.useReduxDispatch)();
    var setElementStatesAction = React.useCallback(function (states) { return dispatch((0, template_2.setElementStates)(states)); }, [dispatch]);
    var onDragStart = function () { return setIsResizing(true); };
    var onDragEnd = function () { return setIsResizing(false); };
    //componentDidMount
    React.useEffect(function () {
        if (templateReducer) {
            (0, template_1.setCustomTemplateReducer)(templateReducer);
        }
    }, []);
    var onSplitterChanged = function () {
        //With the introduction of the splitter, we can no longer rely on a map 
        //filling 100% of its space without needing to manually call updateSize(),
        //so we do it here
        var viewer = (0, runtime_1.getViewer)();
        if (viewer) {
            viewer.updateSize();
        }
    };
    var onActiveElementChanged = React.useCallback(function (id) {
        var states = {
            legendVisible: false,
            taskPaneVisible: false,
            selectionPanelVisible: false
        };
        switch (id) {
            case "Legend":
                states.legendVisible = true;
                break;
            case "TaskPane":
                states.taskPaneVisible = true;
                break;
            case "Selection":
                states.selectionPanelVisible = true;
                break;
        }
        //One of these must be true
        if (states.legendVisible || states.taskPaneVisible || states.selectionPanelVisible)
            setElementStatesAction(states);
    }, [setElementStatesAction]);
    return {
        isResizing: isResizing,
        setIsResizing: setIsResizing,
        locale: locale,
        capabilities: capabilities,
        showSelection: showSelection,
        showLegend: showLegend,
        showTaskPane: showTaskPane,
        onDragStart: onDragStart,
        onDragEnd: onDragEnd,
        onSplitterChanged: onSplitterChanged,
        onActiveElementChanged: onActiveElementChanged,
        dispatch: dispatch
    };
}
exports.useCommonTemplateState = useCommonTemplateState;
//# sourceMappingURL=hooks.js.map