import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getId, getNativeProps, divProperties, createRef, classNamesFunction } from '../../Utilities';
import { CommandButton } from '../../Button';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { PivotItem } from './PivotItem';
import { PivotLinkFormat } from './Pivot.types';
import { PivotLinkSize } from './Pivot.types';
import { Icon } from '../../Icon';
var getClassNames = classNamesFunction();
var PivotItemType = React.createElement(PivotItem, null).type;
var PivotBase = /** @class */ (function (_super) {
    tslib_1.__extends(PivotBase, _super);
    function PivotBase(props) {
        var _this = _super.call(this, props) || this;
        _this.focusZone = createRef();
        _this._renderPivotLink = function (link) {
            var itemKey = link.itemKey, headerButtonProps = link.headerButtonProps;
            var tabId = _this._keyToTabIds[itemKey];
            var onRenderItemLink = link.onRenderItemLink;
            var linkContent;
            var isSelected = _this.state.selectedKey === itemKey;
            if (onRenderItemLink) {
                linkContent = onRenderItemLink(link, _this._renderLinkContent);
            }
            else {
                linkContent = _this._renderLinkContent(link);
            }
            return (React.createElement(CommandButton, tslib_1.__assign({}, headerButtonProps, { id: tabId, key: itemKey, className: isSelected ? _this._classNames.linkIsSelected : _this._classNames.link, onClick: _this._onLinkClick.bind(_this, itemKey), onKeyPress: _this._onKeyPress.bind(_this, itemKey), ariaLabel: link.ariaLabel, role: "tab", "aria-selected": _this.state.selectedKey === itemKey, name: link.headerText, keytipProps: link.keytipProps }), linkContent));
        };
        _this._renderLinkContent = function (link) {
            var itemCount = link.itemCount, itemIcon = link.itemIcon, headerText = link.headerText;
            return (React.createElement("span", { className: _this._classNames.linkContent },
                itemIcon !== undefined && (React.createElement("span", { className: _this._classNames.icon },
                    React.createElement(Icon, { iconName: itemIcon }))),
                headerText !== undefined && React.createElement("span", { className: _this._classNames.text },
                    " ",
                    link.headerText),
                itemCount !== undefined && React.createElement("span", { className: _this._classNames.count },
                    " (",
                    itemCount,
                    ")")));
        };
        /**
         * Renders the current Pivot Item
         */
        _this._renderPivotItem = function () {
            if (_this.props.headersOnly) {
                return null;
            }
            var itemKey = _this.state.selectedKey;
            var index = _this._keyToIndexMapping[itemKey];
            var selectedTabId = _this.state.selectedTabId;
            return (React.createElement("div", { role: "tabpanel", "aria-labelledby": selectedTabId }, React.Children.toArray(_this.props.children)[index]));
        };
        _this._pivotId = getId('Pivot');
        var links = _this._getPivotLinks(_this.props);
        var selectedKey;
        if (props.initialSelectedKey) {
            selectedKey = props.initialSelectedKey;
        }
        else if (props.initialSelectedIndex) {
            selectedKey = links[props.initialSelectedIndex].itemKey;
        }
        else if (props.selectedKey) {
            selectedKey = props.selectedKey;
        }
        else if (links.length) {
            selectedKey = links[0].itemKey;
        }
        _this.state = {
            links: links,
            selectedKey: selectedKey,
            selectedTabId: _this._keyToTabIds[selectedKey]
        };
        _this._renderPivotLink = _this._renderPivotLink.bind(_this);
        return _this;
    }
    PivotBase.prototype.componentWillReceiveProps = function (nextProps) {
        var _this = this;
        var links = this._getPivotLinks(nextProps);
        this.setState(function (prevState, props) {
            var selectedKey;
            if (_this._isKeyValid(nextProps.selectedKey)) {
                selectedKey = nextProps.selectedKey;
            }
            else if (_this._isKeyValid(prevState.selectedKey)) {
                selectedKey = prevState.selectedKey;
            }
            else if (links.length) {
                selectedKey = links[0].itemKey;
            }
            return {
                links: links,
                selectedKey: selectedKey,
                selectedTabId: _this._keyToTabIds[selectedKey]
            };
        });
    };
    /**
     * Sets focus to the first pivot tab.
     */
    PivotBase.prototype.focus = function () {
        if (this.focusZone.current) {
            this.focusZone.current.focus();
        }
    };
    PivotBase.prototype.render = function () {
        var divProps = getNativeProps(this.props, divProperties);
        this._classNames = this._getClassNames(this.props);
        return (React.createElement("div", tslib_1.__assign({}, divProps),
            this._renderPivotLinks(),
            this._renderPivotItem()));
    };
    /**
     * Renders the set of links to route between pivots
     */
    PivotBase.prototype._renderPivotLinks = function () {
        var items = this.state.links.map(this._renderPivotLink);
        return (React.createElement(FocusZone, { componentRef: this.focusZone, direction: FocusZoneDirection.horizontal },
            React.createElement("ul", { className: this._classNames.root, role: "tablist" }, items)));
    };
    /**
     * Gets the set of PivotLinks as arrary of IPivotItemProps
     * The set of Links is determined by child components of type PivotItem
     */
    PivotBase.prototype._getPivotLinks = function (props) {
        var _this = this;
        var links = [];
        this._keyToIndexMapping = {};
        this._keyToTabIds = {};
        React.Children.map(props.children, function (child, index) {
            if (typeof child === 'object' && child.type === PivotItemType) {
                var pivotItem = child;
                var itemKey = pivotItem.props.itemKey || index.toString();
                links.push({
                    headerText: pivotItem.props.headerText || pivotItem.props.linkText,
                    headerButtonProps: pivotItem.props.headerButtonProps,
                    ariaLabel: pivotItem.props.ariaLabel,
                    itemKey: itemKey,
                    itemCount: pivotItem.props.itemCount,
                    itemIcon: pivotItem.props.itemIcon,
                    onRenderItemLink: pivotItem.props.onRenderItemLink,
                    keytipProps: pivotItem.props.keytipProps
                });
                _this._keyToIndexMapping[itemKey] = index;
                _this._keyToTabIds[itemKey] = _this._getTabId(itemKey, index);
            }
        });
        return links;
    };
    /**
     * Generates the Id for the tab button.
     */
    PivotBase.prototype._getTabId = function (itemKey, index) {
        if (this.props.getTabId) {
            return this.props.getTabId(itemKey, index);
        }
        return this._pivotId + ("-Tab" + index);
    };
    /**
     * whether the key exists in the pivot items.
     */
    PivotBase.prototype._isKeyValid = function (itemKey) {
        return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
    };
    /**
     * Handles the onClick event on PivotLinks
     */
    PivotBase.prototype._onLinkClick = function (itemKey, ev) {
        ev.preventDefault();
        this._updateSelectedItem(itemKey, ev);
    };
    /**
     * Handle the onKeyPress eventon the PivotLinks
     */
    PivotBase.prototype._onKeyPress = function (itemKey, ev) {
        if (ev.which === 13 /* enter */) {
            ev.preventDefault();
            this._updateSelectedItem(itemKey);
        }
    };
    /**
     * Updates the state with the new selected index
     */
    PivotBase.prototype._updateSelectedItem = function (itemKey, ev) {
        this.setState({
            selectedKey: itemKey,
            selectedTabId: this._keyToTabIds[itemKey]
        });
        if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
            var index = this._keyToIndexMapping[itemKey];
            // React.Element<any> cannot directly convert to PivotItem.
            var item = React.Children.toArray(this.props.children)[index];
            if (typeof item === 'object' && item.type === PivotItemType) {
                this.props.onLinkClick(item, ev);
            }
        }
    };
    PivotBase.prototype._getClassNames = function (props) {
        var theme = props.theme;
        var rootIsLarge = props.linkSize === PivotLinkSize.large;
        var rootIsTabs = props.linkFormat === PivotLinkFormat.tabs;
        return getClassNames(props.styles, {
            theme: theme,
            rootIsLarge: rootIsLarge,
            rootIsTabs: rootIsTabs
        });
    };
    return PivotBase;
}(BaseComponent));
export { PivotBase };
//# sourceMappingURL=Pivot.base.js.map