import { __assign, __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import { ActionButton } from '../Button';
import BaseComponent from '../BaseComponent';
import { Icon } from '../Icon';
import { classNamesFunction } from '@uifabric-vue/utilities';
var getClassNames = classNamesFunction();
// The number pixels per indentation level for Nav links.
var INDENTATION_SIZE = 14;
// The number of pixels of left margin
var BASE_INDENT = 3;
export function isRelativeUrl(url) {
    // A URL is relative if it has no protocol.
    return !!url && !/^[a-z0-9+-.]:\/\//i.test(url);
}
var Nav = /** @class */ (function (_super) {
    __extends(Nav, _super);
    function Nav() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.isGroupCollapsed = {};
        _this.internalSelectedKey = '';
        return _this;
    }
    Nav.prototype.render = function (h) {
        var _a = this, theme = _a.theme, className = _a.className, isOnTop = _a.isOnTop, groups = _a.groups;
        if (!groups) {
            return null;
        }
        var groupElements = this.groups.map(this.renderGroup);
        var classNames = getClassNames(this.styles, { theme: theme, className: className, isOnTop: isOnTop, groups: groups });
        return h('nav', {
            class: classNames.root,
            attrs: { role: 'navigation' },
        }, groupElements);
    };
    Nav.prototype.renderGroup = function (group, groupIndex) {
        var h = this.$createElement;
        var _a = this, groups = _a.groups, theme = _a.theme;
        var classNames = getClassNames(this.styles, {
            theme: theme,
            isGroup: true,
            isExpanded: this.isGroupExpanded(group),
            groups: groups,
        });
        return h('div', { key: groupIndex }, [
            h('div', { class: classNames.groupContent }, [
                this.renderLinks(group.links, 0),
            ]),
        ]);
    };
    Nav.prototype.renderLinks = function (links, nestingLevel) {
        var _this = this;
        if (!links || !links.length)
            return null;
        var h = this.$createElement;
        var linkElements = links.map(function (link, linkIndex) {
            return _this.renderLink(link, linkIndex, nestingLevel);
        });
        var _a = this, groups = _a.groups, theme = _a.theme;
        var classNames = getClassNames(this.styles, { theme: theme, groups: groups });
        return h('ul', {
            class: classNames.navItems,
            attrs: { role: 'list' },
        }, linkElements);
    };
    Nav.prototype.renderLink = function (link, linkIndex, nestingLevel) {
        var h = this.$createElement;
        var _a = this, groups = _a.groups, theme = _a.theme;
        var classNames = getClassNames(this.styles, { theme: theme, groups: groups });
        return h('li', {
            key: linkIndex,
            class: classNames.navItem,
            attrs: { role: 'listItem' },
        }, [
            this.renderCompositeLink(link, linkIndex, nestingLevel),
            link.isExpanded && this.renderLinks(link.links, ++nestingLevel),
        ]);
    };
    Nav.prototype.renderCompositeLink = function (link, linkIndex, nestingLevel) {
        var h = this.$createElement;
        var _a = this, styles = _a.styles, groups = _a.groups, theme = _a.theme;
        var classNames = getClassNames(this.styles, {
            theme: theme,
            isExpanded: !!link.isExpanded,
            isSelected: false,
            isLink: true,
            isDisabled: link.disabled,
            position: INDENTATION_SIZE * nestingLevel + 1,
            groups: groups,
        });
        return h('div', {
            key: linkIndex,
            class: classNames.compositeLink,
        }, [
            (link.links && link.links.length > 0) &&
                h('button', {
                    class: classNames.chevronButton,
                    on: {
                        click: this.onLinkExpandClicked.bind(this, link),
                    },
                }, [
                    h(Icon, {
                        style: link.isExpanded ? { transform: 'rotate(-180deg)' } : {},
                        class: classNames.chevronIcon,
                        props: {
                            iconName: 'ChevronDown',
                        },
                    }),
                ]),
            this.renderNavLink(link, linkIndex, nestingLevel),
        ]);
    };
    Nav.prototype.onLinkExpandClicked = function (link) {
        link.isExpanded = !link.isExpanded;
    };
    Nav.prototype.renderNavLink = function (link, linkIndex, nestingLevel) {
        var h = this.$createElement;
        var isSelected = link.key === this.internalSelectedKey;
        var isLinkWithIcon = link.icon || link.iconProps;
        var _a = this, groups = _a.groups, theme = _a.theme;
        var classNames = getClassNames(this.styles, {
            theme: theme,
            isSelected: isSelected,
            isDisabled: link.disabled,
            isButtonEntry: link.onClick && !link.forceAnchor,
            leftPadding: INDENTATION_SIZE * nestingLevel + BASE_INDENT + (isLinkWithIcon ? 0 : 24),
            groups: groups,
        });
        return h(ActionButton, {
            attrs: {
                href: link.href || (link.forceAnchor ? '#' : undefined),
                title: link.title || link.name,
                target: link.target,
                disabled: link.disabled,
                className: classNames.link,
            },
            style: { paddingLeft: "".concat(INDENTATION_SIZE * nestingLevel + BASE_INDENT + (isLinkWithIcon ? 0 : 24), "px") },
            nativeOn: {
                click: this.onNavLinkClicked.bind(this, link, linkIndex),
            },
        }, link.name);
    };
    Nav.prototype.onNavLinkClicked = function (link, linkIndex) {
        if (link.onClick)
            link.onClick(link);
        if (!link.url && link.links && link.links.length > 0) {
            link.isExpanded = !link.isExpanded;
        }
        this.internalSelectedKey = link.key;
    };
    Nav.prototype.preventBounce = function (link, ev) {
        if (!link.href && link.forceAnchor)
            ev.preventDefault();
    };
    Nav.prototype.isGroupExpanded = function (group) {
        if (group.name && this.isGroupCollapsed.hasOwnProperty(group.name)) {
            return !this.isGroupCollapsed[group.name];
        }
        if (group.collapseByDefault !== undefined) {
            return !group.collapseByDefault;
        }
        return true;
    };
    Nav.prototype.toggleCollapsed = function (group) {
        var _a;
        if (group.name) {
            var newGroupCollapsed = __assign(__assign({}, this.isGroupCollapsed), (_a = {}, _a[group.name] = this.isGroupExpanded(group), _a));
            this.$set(this, 'isGroupCollapsed', newGroupCollapsed);
        }
    };
    __decorate([
        Prop({ type: Array, default: function () { return []; } }),
        __metadata("design:type", Array)
    ], Nav.prototype, "groups", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], Nav.prototype, "selectedKey", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], Nav.prototype, "isOnTop", void 0);
    Nav = __decorate([
        Component({
            components: { ActionButton: ActionButton, Icon: Icon },
        })
    ], Nav);
    return Nav;
}(BaseComponent));
export default Nav;
//# sourceMappingURL=Nav.js.map