"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarContainer = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var command_1 = require("../api/registry/command");
var toolbar_1 = require("../components/toolbar");
var menu_1 = require("../utils/menu");
var hooks_1 = require("./hooks");
var map_1 = require("../actions/map");
var flyout_1 = require("../actions/flyout");
var context_1 = require("../components/map-providers/context");
var ToolbarContainer = function (props) {
    var containerClass = props.containerClass, containerStyle = props.containerStyle, vertical = props.vertical, hideVerticalLabels = props.hideVerticalLabels;
    var dispatch = (0, context_1.useReduxDispatch)();
    var flyouts = (0, context_1.useAppState)(function (state) { return state.toolbar.flyouts; });
    var toolbar = (0, context_1.useAppState)(function (state) { return state.toolbar.toolbars[props.id]; });
    var tbState = (0, hooks_1.useReducedToolbarAppState)();
    var invokeCommandAction = function (cmd, parameters) { return dispatch((0, map_1.invokeCommand)(cmd, parameters)); };
    var openFlyoutAction = function (id, metrics) { return dispatch((0, flyout_1.openFlyout)(id, metrics)); };
    var closeFlyoutAction = function (id) { return dispatch((0, flyout_1.closeFlyout)(id)); };
    var openComponentAction = function (id, metrics, name, props) { return dispatch((0, flyout_1.openComponent)(id, metrics, name, props)); };
    var closeComponentAction = function (id) { return dispatch((0, flyout_1.closeComponent)(id)); };
    var onCloseFlyout = function (id) { return closeFlyoutAction === null || closeFlyoutAction === void 0 ? void 0 : closeFlyoutAction(id); };
    var onOpenFlyout = function (id, metrics) { return openFlyoutAction === null || openFlyoutAction === void 0 ? void 0 : openFlyoutAction(id, metrics); };
    var onOpenComponent = function (id, metrics, name, props) { return openComponentAction === null || openComponentAction === void 0 ? void 0 : openComponentAction(id, metrics, name, props); };
    var onCloseComponent = function (id) { return closeComponentAction === null || closeComponentAction === void 0 ? void 0 : closeComponentAction(id); };
    var flyoutStates = {};
    if (flyouts) {
        var ids = Object.keys(flyouts);
        for (var _i = 0, ids_1 = ids; _i < ids_1.length; _i++) {
            var fid = ids_1[_i];
            flyoutStates[fid] = !!flyouts[fid].open;
        }
    }
    var tbContainerStyle = tslib_1.__assign({}, (containerStyle || {}));
    if (toolbar && toolbar.items && invokeCommandAction) {
        if (vertical === true) {
            tbContainerStyle.width = toolbar_1.DEFAULT_TOOLBAR_SIZE;
        }
        else {
            tbContainerStyle.height = toolbar_1.DEFAULT_TOOLBAR_SIZE;
            tbContainerStyle.overflow = "auto";
        }
        var items = toolbar.items.map(function (tb) { return (0, command_1.mapToolbarReference)(tb, tbState, invokeCommandAction); });
        var childItems = (0, menu_1.processMenuItems)(items);
        return React.createElement(toolbar_1.Toolbar, { vertical: vertical, hideVerticalLabels: hideVerticalLabels, childItems: childItems, containerClass: containerClass, containerStyle: tbContainerStyle, flyoutStates: flyoutStates, onOpenComponent: onOpenComponent, onCloseComponent: onCloseComponent, onOpenFlyout: onOpenFlyout, onCloseFlyout: onCloseFlyout });
    }
    else {
        return React.createElement("div", null);
    }
};
exports.ToolbarContainer = ToolbarContainer;
//# sourceMappingURL=toolbar.js.map