import * as tslib_1 from "tslib";
import * as React from 'react';
import { css, BaseComponent, createRef, getNativeProps, divProperties, focusFirstChild, elementContains } from '../../Utilities';
import { mergeStyles } from '../../Styling';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { KeytipManager } from '../../utilities/keytips/KeytipManager';
import * as stylesImport from './OverflowSet.scss';
var styles = stylesImport;
var OverflowSet = /** @class */ (function (_super) {
    tslib_1.__extends(OverflowSet, _super);
    function OverflowSet(props) {
        var _this = _super.call(this, props) || this;
        _this._focusZone = createRef();
        _this._persistedKeytips = {};
        _this._keytipManager = KeytipManager.getInstance();
        _this._divContainer = createRef();
        _this._onRenderItems = function (items) {
            return items.map(function (item, i) {
                var wrapperDivProps = { className: css('ms-OverflowSet-item', styles.item) };
                return (React.createElement("div", tslib_1.__assign({ key: item.key }, wrapperDivProps), _this.props.onRenderItem(item)));
            });
        };
        _this._onRenderOverflowButtonWrapper = function (items) {
            var wrapperDivProps = {
                className: css('ms-OverflowSet-overflowButton', styles.item)
            };
            var overflowKeytipSequences = _this.props.keytipSequences;
            var newOverflowItems = [];
            if (overflowKeytipSequences) {
                items.forEach(function (overflowItem) {
                    var keytip = overflowItem.keytipProps;
                    if (keytip) {
                        // Create persisted keytip
                        var persistedKeytip = {
                            content: keytip.content,
                            keySequences: keytip.keySequences,
                            disabled: keytip.disabled || !!(overflowItem.disabled || overflowItem.isDisabled)
                        };
                        if (keytip.hasDynamicChildren || _this._getSubMenuForItem(overflowItem)) {
                            // If the keytip has a submenu or children nodes, change onExecute to persistedKeytipExecute
                            persistedKeytip.onExecute = _this._keytipManager.menuExecute.bind(_this._keytipManager, overflowKeytipSequences, overflowItem.keytipProps.keySequences);
                        }
                        else {
                            // If the keytip doesn't have a submenu, just execute the original function
                            persistedKeytip.onExecute = keytip.onExecute;
                        }
                        // Add this persisted keytip to our internal list, use a temporary uniqueID (its content)
                        // uniqueID will get updated on register
                        _this._persistedKeytips[persistedKeytip.content] = persistedKeytip;
                        // Add the overflow sequence to this item
                        var newOverflowItem = tslib_1.__assign({}, overflowItem, { keytipProps: tslib_1.__assign({}, keytip, { overflowSetSequence: overflowKeytipSequences }) });
                        newOverflowItems.push(newOverflowItem);
                    }
                    else {
                        // Nothing to change, add overflowItem to list
                        newOverflowItems.push(overflowItem);
                    }
                });
            }
            else {
                newOverflowItems = items;
            }
            return React.createElement("div", tslib_1.__assign({}, wrapperDivProps), _this.props.onRenderOverflowButton(newOverflowItems));
        };
        if (props.doNotContainWithinFocusZone) {
            _this._warnMutuallyExclusive({
                doNotContainWithinFocusZone: 'focusZoneProps'
            });
        }
        return _this;
    }
    OverflowSet.prototype.render = function () {
        var _a = this.props, items = _a.items, overflowItems = _a.overflowItems, className = _a.className, focusZoneProps = _a.focusZoneProps, _b = _a.vertical, vertical = _b === void 0 ? false : _b, _c = _a.role, role = _c === void 0 ? 'menubar' : _c, doNotContainWithinFocusZone = _a.doNotContainWithinFocusZone;
        var Tag;
        var uniqueComponentProps;
        if (doNotContainWithinFocusZone) {
            Tag = 'div';
            uniqueComponentProps = tslib_1.__assign({}, getNativeProps(this.props, divProperties), { ref: this._divContainer });
        }
        else {
            Tag = FocusZone;
            uniqueComponentProps = tslib_1.__assign({}, getNativeProps(this.props, divProperties), focusZoneProps, { componentRef: this._focusZone, direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal });
        }
        return (React.createElement(Tag, tslib_1.__assign({}, uniqueComponentProps, { className: mergeStyles('ms-OverflowSet', styles.root, vertical && styles.rootVertical, className), role: role }),
            items && this._onRenderItems(items),
            overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems)));
    };
    /**
     * Sets focus to the first tabbable item in the OverflowSet.
     * @param {boolean} forceIntoFirstElement If true, focus will be forced into the first element,
     * even if focus is already in theOverflowSet
     * @returns True if focus could be set to an active element, false if no operation was taken.
     */
    OverflowSet.prototype.focus = function (forceIntoFirstElement) {
        var focusSucceeded = false;
        if (this.props.doNotContainWithinFocusZone) {
            if (this._divContainer.current) {
                focusSucceeded = focusFirstChild(this._divContainer.current);
            }
        }
        else if (this._focusZone.current) {
            focusSucceeded = this._focusZone.current.focus(forceIntoFirstElement);
        }
        return focusSucceeded;
    };
    /**
     * Sets focus to a specific child element within the OverflowSet.
     * @param {HTMLElement} childElement The child element within the zone to focus.
     * @returns True if focus could be set to an active element, false if no operation was taken.
     */
    OverflowSet.prototype.focusElement = function (childElement) {
        var focusSucceeded = false;
        if (!childElement) {
            return false;
        }
        if (this.props.doNotContainWithinFocusZone) {
            if (this._divContainer.current && elementContains(this._divContainer.current, childElement)) {
                childElement.focus();
                focusSucceeded = document.activeElement === childElement;
            }
        }
        else if (this._focusZone.current) {
            focusSucceeded = this._focusZone.current.focusElement(childElement);
        }
        return focusSucceeded;
    };
    // Add keytip register/unregister handlers to lifecycle functions to correctly manage persisted keytips
    OverflowSet.prototype.componentDidMount = function () {
        this._registerPersistedKeytips();
    };
    OverflowSet.prototype.componentWillUnmount = function () {
        this._unregisterPersistedKeytips();
    };
    OverflowSet.prototype.componentWillUpdate = function () {
        this._unregisterPersistedKeytips();
    };
    OverflowSet.prototype.componentDidUpdate = function () {
        this._registerPersistedKeytips();
    };
    OverflowSet.prototype._registerPersistedKeytips = function () {
        var _this = this;
        Object.keys(this._persistedKeytips).forEach(function (key) {
            var keytip = _this._persistedKeytips[key];
            var uniqueID = _this._keytipManager.register(keytip, true);
            // Update map
            _this._persistedKeytips[uniqueID] = keytip;
            delete _this._persistedKeytips[key];
        });
    };
    OverflowSet.prototype._unregisterPersistedKeytips = function () {
        var _this = this;
        // Delete all persisted keytips saved
        Object.keys(this._persistedKeytips).forEach(function (uniqueID) {
            _this._keytipManager.unregister(_this._persistedKeytips[uniqueID], uniqueID, true);
        });
        this._persistedKeytips = {};
    };
    /**
     * Gets the subMenu for an overflow item
     * Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps
     */
    OverflowSet.prototype._getSubMenuForItem = function (item) {
        if (this.props.itemSubMenuProvider) {
            return this.props.itemSubMenuProvider(item);
        }
        if (item.subMenuProps) {
            return item.subMenuProps.items;
        }
        return undefined;
    };
    return OverflowSet;
}(BaseComponent));
export { OverflowSet };
//# sourceMappingURL=OverflowSet.js.map