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;
};
import { customElement, html, ifDefined, property, state, when } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../lit-element/index.js';
import { ensureSlash } from '../../../router/index.js';
import { debounce } from '../../../utils/index.js';
/**
 * @element umb-menu-item-layout
 * @description
 * A menu item layout to render he backoffice menu item look.
 * This supports nested menu items, and if a `entityType` is provided, it will render the entity actions for it.
 */
let UmbMenuItemLayoutElement = class UmbMenuItemLayoutElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        /**
         * The icon name for the icon to show in this menu item.
         */
        this.iconName = '';
        /**
         * The label for this menu item.
         */
        this.label = '';
        /**
         * Declare if this item has children, this will show the expand symbol.
         */
        this.hasChildren = false;
        this._isActive = false;
        this.#debouncedCheckIsActive = debounce(() => this.#checkIsActive(), 100);
    }
    connectedCallback() {
        super.connectedCallback();
        window.addEventListener('navigationend', this.#debouncedCheckIsActive);
    }
    #debouncedCheckIsActive;
    #checkIsActive() {
        if (!this.href) {
            this._isActive = false;
            return;
        }
        /* Check if the current location includes the href of this menu item
        We ensure that the paths ends with a slash to avoid collisions with paths like /path-1 and /path-1-2 where /path is in both.
        Instead we compare /path-1/ with /path-1-2/ which wont collide.*/
        const location = ensureSlash(window.location.pathname);
        const compareHref = ensureSlash(this.href);
        this._isActive = location.includes(compareHref);
    }
    render() {
        return html `
			<uui-menu-item
				label=${this.label}
				href=${ifDefined(this.href)}
				target=${ifDefined(this.href && this.target ? this.target : undefined)}
				.caretLabel=${this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this.label}
				?active=${this._isActive}
				?has-children=${this.hasChildren}>
				<umb-icon slot="icon" name=${this.iconName}></umb-icon>
				${when(this.entityType, () => html `
						<umb-entity-actions-bundle
							slot="actions"
							.entityType=${this.entityType}
							.unique=${null}
							.label=${this.label}></umb-entity-actions-bundle>
					`)}
				<slot></slot>
			</uui-menu-item>
		`;
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('navigationend', this.#debouncedCheckIsActive);
    }
};
__decorate([
    property({ type: String, attribute: 'entity-type' })
], UmbMenuItemLayoutElement.prototype, "entityType", void 0);
__decorate([
    property({ type: String, attribute: 'icon-name' })
], UmbMenuItemLayoutElement.prototype, "iconName", void 0);
__decorate([
    property({ type: String })
], UmbMenuItemLayoutElement.prototype, "label", void 0);
__decorate([
    property({ type: Boolean, attribute: 'has-children' })
], UmbMenuItemLayoutElement.prototype, "hasChildren", void 0);
__decorate([
    property({ type: String })
], UmbMenuItemLayoutElement.prototype, "href", void 0);
__decorate([
    property({ type: String })
], UmbMenuItemLayoutElement.prototype, "target", void 0);
__decorate([
    state()
], UmbMenuItemLayoutElement.prototype, "_isActive", void 0);
UmbMenuItemLayoutElement = __decorate([
    customElement('umb-menu-item-layout')
], UmbMenuItemLayoutElement);
export { UmbMenuItemLayoutElement };
