define(["require", "exports", "tslib", "react", "../../Utilities", "../../OverflowSet", "../../ResizeGroup", "../../FocusZone", "../../Utilities", "../../Button", "../../Tooltip", "@uifabric/utilities", "@uifabric/styling"], function (require, exports, tslib_1, React, Utilities_1, OverflowSet_1, ResizeGroup_1, FocusZone_1, Utilities_2, Button_1, Tooltip_1, utilities_1, styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getClassNames = Utilities_2.classNamesFunction();
    var CommandBarBase = /** @class */ (function (_super) {
        tslib_1.__extends(CommandBarBase, _super);
        function CommandBarBase() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this._overflowSet = React.createRef();
            _this._resizeGroup = React.createRef();
            _this._onRenderData = function (data) {
                return (React.createElement(FocusZone_1.FocusZone, { className: Utilities_1.css(_this._classNames.root), direction: FocusZone_1.FocusZoneDirection.horizontal, role: 'menubar', "aria-label": _this.props.ariaLabel },
                    React.createElement(OverflowSet_1.OverflowSet, { componentRef: _this._resolveRef('_overflowSet'), className: Utilities_1.css(_this._classNames.primarySet), doNotContainWithinFocusZone: true, role: 'presentation', items: data.primaryItems, overflowItems: data.overflowItems.length ? data.overflowItems : undefined, onRenderItem: _this._onRenderItem, onRenderOverflowButton: _this._onRenderOverflowButton }),
                    data.farItems && (React.createElement(OverflowSet_1.OverflowSet, { className: Utilities_1.css(_this._classNames.secondarySet), doNotContainWithinFocusZone: true, role: 'presentation', items: data.farItems, onRenderItem: _this._onRenderItem, onRenderOverflowButton: Utilities_1.nullRender }))));
            };
            _this._onRenderItem = function (item) {
                if (item.onRender) {
                    // These are the top level items, there is no relevant menu dismissing function to
                    // provide for the IContextualMenuItem onRender function. Pass in a no op function instead.
                    return item.onRender(item, function () { return undefined; });
                }
                var itemText = item.text || item.name;
                var rootStyles = {
                    height: '100%'
                };
                var labelStyles = {
                    whiteSpace: 'nowrap'
                };
                var commandButtonProps = tslib_1.__assign({ allowDisabledFocus: true, role: 'menuitem' }, item, { styles: tslib_1.__assign({}, item.buttonStyles, { root: item.buttonStyles ? styling_1.mergeStyles(rootStyles, item.buttonStyles.root) : rootStyles, label: item.buttonStyles ? styling_1.mergeStyles(labelStyles, item.buttonStyles.label) : labelStyles }), className: Utilities_1.css('ms-CommandBarItem-link', item.className), text: !item.iconOnly ? itemText : undefined, menuProps: item.subMenuProps, onClick: _this._onButtonClick(item) });
                if (item.iconOnly && itemText !== undefined) {
                    return (React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: itemText }, item.tooltipHostProps), _this._commandButton(item, commandButtonProps)));
                }
                return _this._commandButton(item, commandButtonProps);
            };
            _this._commandButton = function (item, props) {
                var ButtonAs = _this.props.buttonAs;
                var CommandBarButtonAs = item.commandBarButtonAs;
                var DefaultButtonAs = Button_1.CommandBarButton;
                // The prop types between these three possible implementations overlap enough that a force-cast is safe.
                var Type = ButtonAs || CommandBarButtonAs || DefaultButtonAs;
                // Always pass the default implementation to the override so it may be composed.
                return React.createElement(Type, tslib_1.__assign({}, props, { defaultRender: DefaultButtonAs }));
            };
            _this._onRenderOverflowButton = function (overflowItems) {
                var _a = _this.props, _b = _a.overflowButtonAs, OverflowButtonType = _b === void 0 ? Button_1.CommandBarButton : _b, _c = _a.overflowButtonProps // assure that props is not empty
                , overflowButtonProps = _c === void 0 ? {} : _c // assure that props is not empty
                ;
                var combinedOverflowItems = (overflowButtonProps.menuProps ? overflowButtonProps.menuProps.items : []).concat(overflowItems);
                var overflowProps = tslib_1.__assign({}, overflowButtonProps, { styles: tslib_1.__assign({ menuIcon: { fontSize: '17px' } }, overflowButtonProps.styles), className: Utilities_1.css('ms-CommandBar-overflowButton', overflowButtonProps.className), menuProps: tslib_1.__assign({}, overflowButtonProps.menuProps, { items: combinedOverflowItems }), menuIconProps: tslib_1.__assign({ iconName: 'More' }, overflowButtonProps.menuIconProps) });
                return React.createElement(OverflowButtonType, tslib_1.__assign({}, overflowProps));
            };
            _this._onReduceData = function (data) {
                var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataReduced = _a.onDataReduced;
                var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;
                // Use first item if shiftOnReduce, otherwise use last item
                var movedItem = primaryItems[shiftOnReduce ? 0 : primaryItems.length - 1];
                if (movedItem !== undefined) {
                    movedItem.renderedInOverflow = true;
                    overflowItems = [movedItem].concat(overflowItems);
                    primaryItems = shiftOnReduce ? primaryItems.slice(1) : primaryItems.slice(0, -1);
                    var newData = tslib_1.__assign({}, data, { primaryItems: primaryItems, overflowItems: overflowItems });
                    cacheKey = _this._computeCacheKey(newData);
                    if (onDataReduced) {
                        onDataReduced(movedItem);
                    }
                    newData.cacheKey = cacheKey;
                    return newData;
                }
                return undefined;
            };
            _this._onGrowData = function (data) {
                var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataGrown = _a.onDataGrown;
                var minimumOverflowItems = data.minimumOverflowItems;
                var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;
                var movedItem = overflowItems[0];
                // Make sure that moved item exists and is not one of the original overflow items
                if (movedItem !== undefined && overflowItems.length > minimumOverflowItems) {
                    movedItem.renderedInOverflow = false;
                    overflowItems = overflowItems.slice(1);
                    // if shiftOnReduce, movedItem goes first, otherwise, last.
                    primaryItems = shiftOnReduce ? [movedItem].concat(primaryItems) : primaryItems.concat([movedItem]);
                    var newData = tslib_1.__assign({}, data, { primaryItems: primaryItems, overflowItems: overflowItems });
                    cacheKey = _this._computeCacheKey(newData);
                    if (onDataGrown) {
                        onDataGrown(movedItem);
                    }
                    newData.cacheKey = cacheKey;
                    return newData;
                }
                return undefined;
            };
            return _this;
        }
        CommandBarBase.prototype.render = function () {
            var _a = this.props, items = _a.items, overflowItems = _a.overflowItems, farItems = _a.farItems, styles = _a.styles, theme = _a.theme, dataDidRender = _a.dataDidRender, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, _c = _a.onGrowData, onGrowData = _c === void 0 ? this._onGrowData : _c;
            var commandBarData = {
                primaryItems: items.slice(),
                overflowItems: overflowItems.slice(),
                minimumOverflowItems: overflowItems.slice().length,
                farItems: farItems,
                cacheKey: ''
            };
            this._classNames = getClassNames(styles, { theme: theme });
            // ResizeGroup will render these attributes to the root <div>.
            // TODO We may need to elevate classNames from <FocusZone> into <ResizeGroup> ?
            var nativeProps = utilities_1.getNativeProps(this.props, utilities_1.divProperties);
            return (React.createElement(ResizeGroup_1.ResizeGroup, tslib_1.__assign({}, nativeProps, { componentRef: this._resizeGroup, data: commandBarData, onReduceData: onReduceData, onGrowData: onGrowData, onRenderData: this._onRenderData, dataDidRender: dataDidRender })));
        };
        CommandBarBase.prototype.focus = function () {
            var overflowSet = this._overflowSet.current;
            overflowSet && overflowSet.focus();
        };
        CommandBarBase.prototype.remeasure = function () {
            this._resizeGroup.current && this._resizeGroup.current.remeasure();
        };
        CommandBarBase.prototype._onButtonClick = function (item) {
            return function (ev) {
                // inactive is deprecated. remove check in 7.0
                if (item.inactive) {
                    return;
                }
                if (item.onClick) {
                    item.onClick(ev, item);
                }
            };
        };
        CommandBarBase.prototype._computeCacheKey = function (data) {
            var primaryItems = data.primaryItems, _a = data.farItems, farItems = _a === void 0 ? [] : _a, overflowItems = data.overflowItems;
            var returnKey = function (acc, current) {
                var _a = current.cacheKey, cacheKey = _a === void 0 ? current.key : _a;
                return acc + cacheKey;
            };
            var primaryKey = primaryItems.reduce(returnKey, '');
            var farKey = farItems.reduce(returnKey, '');
            var overflowKey = !!overflowItems.length ? 'overflow' : '';
            return [primaryKey, farKey, overflowKey].join(' ');
        };
        CommandBarBase.defaultProps = {
            items: [],
            overflowItems: []
        };
        return CommandBarBase;
    }(Utilities_1.BaseComponent));
    exports.CommandBarBase = CommandBarBase;
});
//# sourceMappingURL=CommandBar.base.js.map