define(["require", "exports", "tslib", "react", "../../Utilities", "../../FocusZone", "../../Button", "../../Icon", "./Nav.scss", "../../Styling"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, Button_1, Icon_1, stylesImport, Styling_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    // The number pixels per indentation level for Nav links.
    var _indentationSize = 14;
    // Tne number of pixels of left margin when there is expand/collaps button
    var _indentWithExpandButton = 28;
    // Tne number of pixels of left margin when there is expand/collaps button
    var _indentNoExpandButton = 20;
    // global var used in _isLinkSelectedKey
    var _urlResolver;
    var Nav = (function (_super) {
        tslib_1.__extends(Nav, _super);
        function Nav(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                isGroupCollapsed: {},
                isLinkExpandStateChanged: false,
                selectedKey: props.initialSelectedKey || props.selectedKey,
            };
            _this._hasExpandButton = false;
            return _this;
        }
        Nav.prototype.render = function () {
            var _this = this;
            var _a = this.props, groups = _a.groups, className = _a.className, isOnTop = _a.isOnTop;
            if (!groups) {
                return null;
            }
            // when this.props.groups[x].name is specified or Any of the link has child link, chevorn Expand/collaps button is shown,
            // different padding is needed. _hasExpandButton marks this condition.
            this._hasExpandButton = groups.some(function (group, groupIndex) {
                return !!group && !!group.name || group.links && group.links.some(function (link, linkIndex) {
                    return !!link && !!link.links && link.links.length > 0;
                });
            });
            var groupElements = 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: Utilities_1.css('ms-Nav', styles.root, className, isOnTop && Utilities_1.css('is-onTop', styles.rootIsOnTop, Styling_1.AnimationClassNames.slideRightIn40)) }, groupElements)));
        };
        Object.defineProperty(Nav.prototype, "selectedKey", {
            get: function () {
                return this.state.selectedKey;
            },
            enumerable: true,
            configurable: true
        });
        Nav.prototype._renderAnchorLink = function (link, linkIndex, nestingLevel) {
            // 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 = Utilities_1.getRTL();
            var paddingBefore = (_indentationSize * nestingLevel +
                (this._hasExpandButton ? _indentWithExpandButton : _indentNoExpandButton)).toString(10) + 'px';
            return (React.createElement("a", { className: Utilities_1.css('ms-Nav-link', styles.link), style: (_a = {}, _a[isRtl ? 'paddingRight' : 'paddingLeft'] = paddingBefore, _a), href: link.url || 'javascript:', onClick: this._onNavAnchorLinkClicked.bind(this, link), "aria-label": link.ariaLabel, title: link.title || link.name, target: link.target },
                link.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(link.iconClassName, styles.iconLink), iconName: 'IconLink' })),
                this.props.onRenderLink(link)));
            var _a;
        };
        Nav.prototype._renderButtonLink = function (link, linkIndex) {
            return (React.createElement(Button_1.CommandButton, { className: Utilities_1.css('ms-Nav-link ms-Nav-linkButton', styles.link, (_a = {
                        'isOnExpanded': this._hasExpandButton
                    },
                    _a[styles.linkIsOnExpanded] = this._hasExpandButton,
                    _a)), href: link.url, iconProps: { iconName: link.icon }, description: link.title || link.name, onClick: this._onNavButtonLinkClicked.bind(this, link) }, link.name));
            var _a;
        };
        Nav.prototype._renderCompositeLink = function (link, linkIndex, nestingLevel) {
            var isLinkSelected = this._isLinkSelected(link);
            var isRtl = Utilities_1.getRTL();
            var paddingBefore = _indentationSize * nestingLevel + "px";
            return (React.createElement("div", { key: link.key || linkIndex, className: Utilities_1.css('ms-Nav-compositeLink', styles.compositeLink, (_a = {
                        ' is-expanded': !!link.isExpanded,
                        'is-selected': isLinkSelected
                    },
                    _a[styles.compositeLinkIsExpanded] = !!link.isExpanded,
                    _a[styles.compositeLinkIsSelected] = isLinkSelected,
                    _a)) },
                (link.links && link.links.length > 0 ?
                    React.createElement("button", { style: (_b = {}, _b[isRtl ? 'marginRight' : 'marginLeft'] = paddingBefore, _b), className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--link', styles.chevronButton, styles.chevronButtonLink), onClick: this._onLinkExpandClicked.bind(this, link), "aria-label": this.props.expandButtonAriaLabel, "aria-expanded": link.isExpanded ? 'true' : 'false' },
                        React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Nav-chevron', styles.chevronIcon, link.isExpanded), iconName: 'ChevronDown' })) : null),
                !!link.onClick ? this._renderButtonLink(link, linkIndex) : this._renderAnchorLink(link, linkIndex, nestingLevel)));
            var _a, _b;
        };
        Nav.prototype._renderLink = function (link, linkIndex, nestingLevel) {
            return (React.createElement("li", { key: link.key || linkIndex, role: 'listitem', className: Utilities_1.css(styles.navItem) },
                this._renderCompositeLink(link, linkIndex, nestingLevel),
                (link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null)));
        };
        Nav.prototype._renderLinks = function (links, nestingLevel) {
            var _this = this;
            if (!links || !links.length) {
                return null;
            }
            var linkElements = links.map(function (link, linkIndex) { return _this._renderLink(link, linkIndex, nestingLevel); });
            return (React.createElement("ul", { role: 'list', "aria-label": this.props.ariaLabel, className: Utilities_1.css(styles.navItems) }, linkElements));
        };
        Nav.prototype._renderGroup = function (group, groupIndex) {
            var isGroupExpanded = !this.state.isGroupCollapsed[group.name];
            return (React.createElement("div", { key: groupIndex, className: Utilities_1.css('ms-Nav-group', styles.group, (_a = {
                        'is-expanded': isGroupExpanded
                    },
                    _a[styles.groupIsExpanded] = isGroupExpanded,
                    _a)) },
                (group.name ?
                    React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize), onClick: this._onGroupHeaderClicked.bind(this, group.name) },
                        React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Nav-chevron', styles.chevronIcon, isGroupExpanded && styles.chevronIsExpanded), iconName: 'ChevronDown' }),
                        group.name) : null),
                React.createElement("div", { className: Utilities_1.css('ms-Nav-groupContent', Styling_1.AnimationClassNames.slideDownIn20, styles.groupContent) }, this._renderLinks(group.links, 0 /* nestingLevel */))));
            var _a;
        };
        Nav.prototype._onGroupHeaderClicked = function (groupKey, ev) {
            var isGroupCollapsed = this.state.isGroupCollapsed;
            isGroupCollapsed[groupKey] = !isGroupCollapsed[groupKey];
            this.setState({ isGroupCollapsed: isGroupCollapsed });
            ev.preventDefault();
            ev.stopPropagation();
        };
        Nav.prototype._onLinkExpandClicked = function (link, ev) {
            link.isExpanded = !link.isExpanded;
            this.setState({ isLinkExpandStateChanged: true });
            ev.preventDefault();
            ev.stopPropagation();
        };
        Nav.prototype._onNavAnchorLinkClicked = function (link, ev) {
            if (this.props.onLinkClick) {
                this.props.onLinkClick(ev, link);
            }
            this.setState({ selectedKey: link.key });
        };
        Nav.prototype._onNavButtonLinkClicked = function (link, ev) {
            if (link.onClick) {
                link.onClick(ev, link);
            }
            this.setState({ selectedKey: link.key });
        };
        Nav.prototype._isLinkSelected = function (link) {
            // if caller passes in selectedKey, use it as first choice or
            // if current state.selectedKey (from addressbar) is match to the link
            if (this.props.selectedKey !== undefined) {
                return link.key === this.props.selectedKey;
            }
            else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) {
                return true;
            }
            // resolve is not supported for ssr
            if (typeof (window) === 'undefined') {
                return false;
            }
            if (!link.url) {
                return false;
            }
            _urlResolver = _urlResolver || document.createElement('a');
            _urlResolver.href = link.url || '';
            var target = _urlResolver.href;
            if (location.href === target) {
                return true;
            }
            if (location.protocol + '//' + location.host + location.pathname === 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;
        };
        return Nav;
    }(Utilities_1.BaseComponent));
    Nav.defaultProps = {
        groups: null,
        onRenderLink: function (link) { return (React.createElement("span", { className: Utilities_1.css('ms-Nav-linkText', styles.linkText) }, link.name)); }
    };
    exports.Nav = Nav;
});

//# sourceMappingURL=Nav.js.map
