"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var FocusZone_1 = require("../../FocusZone");
var PivotItem_1 = require("./PivotItem");
var Pivot_Props_1 = require("./Pivot.Props");
var Pivot_Props_2 = require("./Pivot.Props");
var Pivot_scss_1 = require("./Pivot.scss");
var Pivot = (function (_super) {
    __extends(Pivot, _super);
    function Pivot(props) {
        var _this = _super.call(this, props) || this;
        _this._pivotId = Utilities_1.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._renderLink = _this._renderLink.bind(_this);
        return _this;
    }
    Pivot.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],
            };
        });
    };
    Pivot.prototype.render = function () {
        return (React.createElement("div", null,
            this._renderPivotLinks(),
            this._renderPivotItem()));
    };
    /**
     * Renders the set of links to route between pivots
     */
    Pivot.prototype._renderPivotLinks = function () {
        return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
            React.createElement("ul", { className: Utilities_1.css('ms-Pivot', Pivot_scss_1.default.root, (_a = {}, _a['ms-Pivot--large ' + Pivot_scss_1.default.rootIsLarge] = this.props.linkSize === Pivot_Props_2.PivotLinkSize.large, _a), (_b = {}, _b['ms-Pivot--tabs ' + Pivot_scss_1.default.rootIsTabs] = this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs, _b)), role: 'tablist' }, this.state.links.map(this._renderLink))));
        var _a, _b;
    };
    /**
     * Renders a pivot link
     */
    Pivot.prototype._renderLink = function (link) {
        var itemKey = link.itemKey;
        var tabId = this._keyToTabIds[itemKey];
        var onRenderItemLink = link.onRenderItemLink;
        var linkContent;
        if (onRenderItemLink) {
            linkContent = onRenderItemLink(link, this._renderLinkContent);
        }
        else {
            linkContent = this._renderLinkContent(link);
        }
        return (React.createElement(Button_1.CommandButton, { id: tabId, key: itemKey, className: Utilities_1.css('ms-Pivot-link', Pivot_scss_1.default.link, (_a = {},
                _a['is-selected ' + Pivot_scss_1.default.linkIsSelected] = this.state.selectedKey === itemKey,
                _a)), onClick: this._onLinkClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), "aria-label": link.ariaLabel, role: 'tab', "aria-selected": this.state.selectedKey === itemKey }, linkContent));
        var _a;
    };
    Pivot.prototype._renderLinkContent = function (link) {
        var itemCount = link.itemCount, itemIcon = link.itemIcon, linkText = link.linkText;
        return React.createElement("span", { className: Utilities_1.css('ms-Pivot-link-content') },
            itemIcon !== undefined && (React.createElement("span", { className: Utilities_1.css('ms-Pivot-icon', Pivot_scss_1.default.icon) },
                React.createElement("i", { className: "ms-Icon ms-Icon--" + itemIcon }))),
            linkText !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-text', Pivot_scss_1.default.text) },
                " ",
                link.linkText),
            itemCount !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-count', Pivot_scss_1.default.count) },
                " (",
                itemCount,
                ")"));
    };
    /**
     * Renders the current Pivot Item
     */
    Pivot.prototype._renderPivotItem = function () {
        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]));
    };
    /**
     * Gets the set of PivotLinks as arrary of IPivotItemProps
     * The set of Links is determined by child components of type PivotItem
     */
    Pivot.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 === PivotItem_1.PivotItem) {
                var pivotItem = child;
                var itemKey = pivotItem.props.itemKey || index.toString();
                links.push({
                    linkText: pivotItem.props.linkText,
                    ariaLabel: pivotItem.props.ariaLabel,
                    itemKey: itemKey,
                    itemCount: pivotItem.props.itemCount,
                    itemIcon: pivotItem.props.itemIcon,
                    onRenderItemLink: pivotItem.props.onRenderItemLink
                });
                _this._keyToIndexMapping[itemKey] = index;
                _this._keyToTabIds[itemKey] = _this._pivotId + ("-Tab" + index);
            }
        });
        return links;
    };
    /**
     * whether the key exists in the pivot items.
     */
    Pivot.prototype._isKeyValid = function (itemKey) {
        return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
    };
    /**
     * Handles the onClick event on PivotLinks
     */
    Pivot.prototype._onLinkClick = function (itemKey, ev) {
        ev.preventDefault();
        this._updateSelectedItem(itemKey, ev);
    };
    /**
     * Handle the onKeyPress eventon the PivotLinks
     */
    Pivot.prototype._onKeyPress = function (itemKey, ev) {
        ev.preventDefault();
        if (ev.which === Utilities_1.KeyCodes.enter) {
            this._updateSelectedItem(itemKey);
        }
    };
    /**
     * Updates the state with the new selected index
     */
    Pivot.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 === PivotItem_1.PivotItem) {
                this.props.onLinkClick(item, ev);
            }
        }
    };
    return Pivot;
}(React.Component));
__decorate([
    Utilities_1.autobind
], Pivot.prototype, "_renderLink", null);
__decorate([
    Utilities_1.autobind
], Pivot.prototype, "_renderLinkContent", null);
exports.Pivot = Pivot;

//# sourceMappingURL=Pivot.js.map
