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 { UmbDefaultCollectionMenuItemContext } from './default/index.js';
import { customElement, property } from '../../../../../external/lit/index.js';
import { UmbExtensionElementAndApiSlotElementBase, umbExtensionsRegistry, } from '../../../extension-registry/index.js';
import { createObservablePart } from '../../../../../libs/observable-api/index.js';
let UmbCollectionMenuItemElement = class UmbCollectionMenuItemElement extends UmbExtensionElementAndApiSlotElementBase {
    get entityType() {
        return this.#entityType;
    }
    set entityType(newVal) {
        this.#entityType = newVal;
        this.#observeEntityType();
    }
    #entityType;
    set props(newVal) {
        super.props = newVal;
        this.#assignProps();
    }
    get props() {
        return super.props;
    }
    #observeEntityType() {
        if (!this.#entityType)
            return;
        const filterByEntityType = (manifest) => {
            if (!this.#entityType)
                return false;
            return manifest.forEntityTypes.includes(this.#entityType);
        };
        // Check if we can find a matching collection menu item for the current entity type.
        // If we can, we will use that one, if not we will render a fallback collection menu item.
        this.observe(
        // TODO: what should we do if there are multiple collection menu items for an entity type?
        // This method gets all extensions based on a type, then filters them based on the entity type. and then we get the alias of the first one [NL]
        createObservablePart(umbExtensionsRegistry.byTypeAndFilter(this.getExtensionType(), filterByEntityType), (x) => x[0]?.alias), (alias) => {
            this.alias = alias;
            // If we don't find any registered collection menu items for this specific entity type, we will render a fallback collection menu item.
            // This is on purpose not done with the extension initializer since we don't want to spin up a real extension unless we have to.
            if (!alias) {
                this.#renderFallbackItem();
            }
        }, 'umbObserveAlias');
    }
    #renderFallbackItem() {
        // TODO: make creating of elements with apis a shared function.
        const element = document.createElement('umb-default-collection-menu-item');
        const api = new UmbDefaultCollectionMenuItemContext(element);
        element.api = api;
        this._element = element;
        this.#assignProps();
        this.requestUpdate('_element');
    }
    getExtensionType() {
        return 'collectionMenuItem';
    }
    getDefaultElementName() {
        return 'umb-default-collection-menu-item';
    }
    #assignProps() {
        if (!this._element || !this.props)
            return;
        Object.keys(this.props).forEach((key) => {
            this._element[key] = this.props[key];
        });
    }
    getDefaultApiConstructor() {
        return UmbDefaultCollectionMenuItemContext;
    }
};
__decorate([
    property({ type: String, reflect: true })
], UmbCollectionMenuItemElement.prototype, "entityType", null);
__decorate([
    property({ type: Object, attribute: false })
], UmbCollectionMenuItemElement.prototype, "props", null);
UmbCollectionMenuItemElement = __decorate([
    customElement('umb-collection-menu-item')
], UmbCollectionMenuItemElement);
export { UmbCollectionMenuItemElement };
