"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 React = require('react');
var FocusZone_1 = require('../../FocusZone');
var css_1 = require('../../utilities/css');
var rtl_1 = require('../../utilities/rtl');
require('./Nav.scss');
// The number pixels per indentation level for Nav links.
var _indentationSize = 14;
var Nav = (function (_super) {
    __extends(Nav, _super);
    function Nav() {
        _super.call(this);
        this.state = {
            isGroupExpanded: []
        };
    }
    Nav.prototype.render = function () {
        var _this = this;
        if (!this.props.groups) {
            return null;
        }
        if (this.props.initialSelectedKey) {
            this._selectedKey = this.props.initialSelectedKey;
        }
        var groupElements = this.props.groups.map(function (group, groupIndex) { return _this._renderGroup(group, groupIndex); });
        return (React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.vertical}, React.createElement("nav", {role: 'navigation', className: css_1.css('ms-Nav', { 'is-onTop ms-u-slideRightIn40': this.props.isOnTop })}, groupElements)));
    };
    Object.defineProperty(Nav.prototype, "selectedKey", {
        get: function () {
            return this._selectedKey;
        },
        enumerable: true,
        configurable: true
    });
    Nav.prototype._renderLink = function (link, linkIndex, nestingLevel, hasGroupButton) {
        var onLinkClick = this.props.onLinkClick;
        // Determine the appropriate padding to add before this link.
        // In RTL, the "before" padding will go on the right instead of the left.
        var isRtl = rtl_1.getRTL();
        var paddingBefore = (_indentationSize * nestingLevel + (hasGroupButton ? 40 : 20)).toString(10) + 'px';
        var isLinkSelected = _isLinkSelected(link, this._selectedKey);
        if (isLinkSelected) {
            this._selectedKey = link.key ? link.key : undefined;
        }
        return (React.createElement("li", {key: linkIndex}, React.createElement("a", {className: css_1.css('ms-Nav-link', { 'is-selected': isLinkSelected }), style: (_a = {}, _a[isRtl ? 'paddingRight' : 'paddingLeft'] = paddingBefore, _a), href: link.url || 'javascript:', onClick: onLinkClick, "aria-label": link.ariaLabel, title: link.title ? link.title : '', target: link.target || ''}, (link.iconClassName ?
            React.createElement("i", {className: css_1.css('ms-Icon', 'ms-Nav-IconLink', link.iconClassName)})
            : ''), this.props.onRenderLink(link)), this._renderLinks(link.links, nestingLevel + 1, hasGroupButton)));
        var _a;
    };
    Nav.prototype._renderLinks = function (links, nestingLevel, hasGroupButton) {
        var _this = this;
        if (!links || !links.length) {
            return null;
        }
        var linkElements = links.map(function (link, linkIndex) { return _this._renderLink(link, linkIndex, nestingLevel, hasGroupButton); });
        return (React.createElement("ul", null, linkElements));
    };
    Nav.prototype._renderGroup = function (group, groupIndex) {
        var isGroupExpanded = this.state.isGroupExpanded[groupIndex] !== false;
        var hasGroupButton = !!(group.name);
        return (React.createElement("div", {key: groupIndex, className: css_1.css('ms-Nav-group', { 'is-expanded': isGroupExpanded })}, (hasGroupButton ?
            React.createElement("button", {className: 'ms-Nav-groupButton', onClick: this._onGroupHeaderClicked.bind(this, groupIndex)}, React.createElement("i", {className: css_1.css('ms-Nav-groupChevron', 'ms-Icon', 'ms-Icon--chevronDown')}), group.name) : null), React.createElement("div", {className: css_1.css('ms-Nav-groupContent', 'ms-u-slideDownIn20')}, this._renderLinks(group.links, 0 /* nestingLevel */, hasGroupButton))));
    };
    Nav.prototype._onGroupHeaderClicked = function (groupIndex, ev) {
        var currentState = this.state.isGroupExpanded[groupIndex] !== false;
        this.state.isGroupExpanded[groupIndex] = !currentState;
        this.forceUpdate();
        ev.preventDefault();
        ev.stopPropagation();
    };
    Nav.defaultProps = {
        groups: null,
        onRenderLink: function (link) { return (React.createElement("span", {className: 'ms-Nav-linkText'}, link.name)); }
    };
    return Nav;
}(React.Component));
exports.Nav = Nav;
// A tag used for resolving links.
var _urlResolver = document.createElement('a');
function _isLinkSelected(link, selectedKey) {
    if (!link.url) {
        return false;
    }
    _urlResolver.href = link.url || '';
    var target = _urlResolver.href;
    if (selectedKey && link.key === selectedKey) {
        return true;
    }
    if (location.protocol + '//' + location.host + location.pathname === target) {
        return true;
    }
    if (location.href === target) {
        return true;
    }
    if (location.hash) {
        // Match the hash to the url.
        if (location.hash === link.url) {
            return true;
        }
        // Match a rebased url. (e.g. #foo becomes http://hostname/foo)
        _urlResolver.href = location.hash.substring(1);
        return _urlResolver.href === target;
    }
    return false;
}

//# sourceMappingURL=Nav.js.map
