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 __());
};
define(["require", "exports", 'react', '../../FocusZone', '../../utilities/KeyCodes', './PivotItem', './Pivot.Props', './Pivot.Props', '../../utilities/css', './Pivot.scss'], function (require, exports, React, FocusZone_1, KeyCodes_1, PivotItem_1, Pivot_Props_1, Pivot_Props_2, css_1) {
    "use strict";
    var Pivot = (function (_super) {
        __extends(Pivot, _super);
        function Pivot(props) {
            _super.call(this, props);
            this.state = this._getStateFromProps(props);
        }
        Pivot.prototype.componentWillReceiveProps = function (newProps) {
            this.state = this._getStateFromProps(newProps);
        };
        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 () {
            var links = this.getPivotLinks();
            return (React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.horizontal}, React.createElement("ul", {className: css_1.css('ms-Pivot', { 'ms-Pivot--large': this.props.linkSize === Pivot_Props_2.PivotLinkSize.large }, { 'ms-Pivot--tabs': this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs })}, links.map(this._renderLink.bind(this)))));
        };
        /**
         * Renders a pivot link
         */
        Pivot.prototype._renderLink = function (link, index, links) {
            return (React.createElement("li", {key: index, className: css_1.css('ms-Pivot-link', {
                'is-selected': this.state.selectedIndex === index })}, React.createElement("a", {onClick: this._onLinkClick.bind(this, index), onKeyPress: this._onKeyPress.bind(this, index), role: 'link'}, link.linkText)));
        };
        /**
         * Renders the current Pivot Item
         */
        Pivot.prototype._renderPivotItem = function () {
            var index = this.state.selectedIndex;
            if (!index) {
                index = 0;
            }
            var item = this.props.children[index];
            return (React.createElement("div", {className: 'pivotItem'}, item));
        };
        /**
         * Gets the set of PivotLinks as arrary of IPivotLink
         * The set of Links is determined by child components of type PivotItem
         */
        Pivot.prototype.getPivotLinks = function () {
            var links = [];
            React.Children.map(this.props.children, function (child, index) {
                if (typeof child === 'object' && child.type === PivotItem_1.PivotItem) {
                    var pivotItem = child;
                    links.push({
                        linkText: pivotItem.props.linkText
                    });
                }
            });
            return links;
        };
        /**
         * Handles the onClick event on PivotLinks
         */
        Pivot.prototype._onLinkClick = function (index, ev) {
            ev.preventDefault();
            this._updateSelectedItem(index, ev);
        };
        /**
         * Handle the onKeyPress eventon the PivotLinks
         */
        Pivot.prototype._onKeyPress = function (index, ev) {
            ev.preventDefault();
            if (ev.which === KeyCodes_1.KeyCodes.enter) {
                this._updateSelectedItem(index);
            }
        };
        /**
         * Updates the state with the new selected index
         */
        Pivot.prototype._updateSelectedItem = function (index, ev) {
            this.setState({
                selectedIndex: index
            });
            if (this.props.onLinkClick) {
                this.props.onLinkClick(this.props.children[index], ev);
            }
        };
        /**
         * returns new state state based on the provided Props
         */
        Pivot.prototype._getStateFromProps = function (newProps) {
            var newState;
            var index;
            if (newProps.initialSelectedIndex) {
                index = newProps.initialSelectedIndex;
            }
            else {
                index = 0;
            }
            newState = {
                selectedIndex: index
            };
            return newState;
        };
        return Pivot;
    }(React.Component));
    exports.Pivot = Pivot;
});
