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 { css, customElement, html, ifDefined, property, repeat, when } from '../../../../external/lit/index.js';
import { UmbElementMixin } from '../../../../libs/element-api/index.js';
import { UUIPopoverContainerElement } from '../../../../external/uui/index.js';
let UmbCascadingMenuPopoverElement = class UmbCascadingMenuPopoverElement extends UmbElementMixin(UUIPopoverContainerElement) {
    #getPopoverById(popoverId) {
        return this.shadowRoot?.querySelector(`#${popoverId}`);
    }
    #isMenuActive(items) {
        return !!items?.some((item) => item.isActive?.() || this.#isMenuActive(item.items));
    }
    #onMouseEnter(item, popoverId) {
        if (!(item.items?.length || item.menu) || !popoverId)
            return;
        const popover = this.#getPopoverById(popoverId);
        if (!popover)
            return;
        // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        popover.showPopover();
    }
    #onMouseLeave(item, popoverId) {
        if (!popoverId)
            return;
        const popover = this.#getPopoverById(popoverId);
        if (!popover)
            return;
        // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        popover.hidePopover();
    }
    #onClick(item, popoverId) {
        item.execute?.();
        if (!popoverId) {
            setTimeout(() => {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                this.hidePopover();
            }, 100);
        }
    }
    render() {
        return html `
			<uui-scroll-container>
				${when(this.items?.length, () => repeat(this.items, (item, index) => this.#renderItem(item, index)))}
				${super.render()}
			</uui-scroll-container>
		`;
    }
    #renderItem(item, index) {
        const hasChildMenu = item.items?.length || !!item.menu;
        const popoverId = hasChildMenu ? `menu-${index}` : undefined;
        const element = item.element;
        if (element && popoverId) {
            element.setAttribute('popovertarget', popoverId);
        }
        const label = this.localize.string(item.label);
        const isActive = item.isActive?.() || this.#isMenuActive(item.items) || false;
        return html `
			<div
				@mouseenter=${() => this.#onMouseEnter(item, popoverId)}
				@mouseleave=${() => this.#onMouseLeave(item, popoverId)}>
				${when(element, () => element, () => html `
						<uui-menu-item
							class=${item.separatorAfter ? 'separator' : ''}
							label=${label}
							popovertarget=${ifDefined(popoverId)}
							select-mode="highlight"
							?selected=${isActive}
							@click-label=${() => this.#onClick(item, popoverId)}>
							${when(item.icon, (icon) => html `<uui-icon slot="icon" name=${icon}></uui-icon>`)}
							<div slot="label" class="menu-item">
								<span style=${ifDefined(item.style)}>${label}</span>
								${when(hasChildMenu, () => html `<uui-symbol-expand></uui-symbol-expand>`)}
							</div>
						</uui-menu-item>
					`)}
				${when(popoverId, (popoverId) => html `
						<umb-cascading-menu-popover id=${popoverId} placement="right-start" .items=${item.items}>
							${when(item.menu, (menuAlias) => html `
									<umb-extension-slot
										type="menu"
										default-element="umb-tiptap-menu"
										single
										.filter=${(menu) => menu.alias === menuAlias}></umb-extension-slot>
								`)}
						</umb-cascading-menu-popover>
					`)}
			</div>
		`;
    }
    static { this.styles = [
        ...UUIPopoverContainerElement.styles,
        css `
			:host {
				--uui-menu-item-flat-structure: 1;

				background-color: var(--uui-color-surface);
				border-radius: var(--uui-border-radius);
				box-shadow: var(--uui-shadow-depth-3);
				padding: var(--uui-size-space-1);
			}

			.menu-item {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: var(--uui-size-space-4);
			}

			.separator::after {
				content: '';
				position: absolute;
				border-bottom: 1px solid var(--uui-color-border);
				width: 100%;
			}

			uui-scroll-container {
				max-height: 500px;
			}
		`,
    ]; }
};
__decorate([
    property({ type: Array })
], UmbCascadingMenuPopoverElement.prototype, "items", void 0);
UmbCascadingMenuPopoverElement = __decorate([
    customElement('umb-cascading-menu-popover')
], UmbCascadingMenuPopoverElement);
export { UmbCascadingMenuPopoverElement };
export default UmbCascadingMenuPopoverElement;
