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, property, state } from '../../../../external/lit/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
import { UmbExtensionsElementInitializer } from '../../../../libs/extension-api/index.js';
import { umbExtensionsRegistry } from '../../extension-registry/index.js';
import { UmbDeselectedEvent, UmbSelectedEvent } from '../../event/index.js';
import { UmbRoutePathAddendumContext } from '../../router/index.js';
import { UMB_MARK_ATTRIBUTE_NAME } from '../../const/index.js';
import { UUIBlinkAnimationValue } from '../../../../external/uui/index.js';
import './default-item-ref.element.js';
let UmbEntityItemRefElement = class UmbEntityItemRefElement extends UmbLitElement {
    #extensionsController;
    #item;
    set item(value) {
        const oldValue = this.#item;
        this.#item = value;
        if (value === oldValue)
            return;
        if (!value)
            return;
        // If the component is already created and the entity type is the same, we can just update the item.
        if (this._component && value.entityType === oldValue?.entityType) {
            this._component.item = value;
            return;
        }
        this.#pathAddendum.setAddendum('ref/' + value.entityType + '/' + value.unique);
        // If the component is already created, but the entity type is different, we need to destroy the component.
        this.#createController(value.entityType);
    }
    get item() {
        return this.#item;
    }
    #readonly = false;
    get readonly() {
        return this.#readonly;
    }
    set readonly(value) {
        this.#readonly = value;
        if (this._component) {
            this._component.readonly = this.#readonly;
        }
    }
    #standalone = false;
    get standalone() {
        return this.#standalone;
    }
    set standalone(value) {
        this.#standalone = value;
        if (this._component) {
            this._component.standalone = this.#standalone;
        }
    }
    #selectOnly = false;
    get selectOnly() {
        return this.#selectOnly;
    }
    set selectOnly(value) {
        this.#selectOnly = value;
        if (this._component) {
            this._component.selectOnly = this.#selectOnly;
        }
    }
    #selectable = false;
    get selectable() {
        return this.#selectable;
    }
    set selectable(value) {
        this.#selectable = value;
        if (this._component) {
            this._component.selectable = this.#selectable;
        }
    }
    #selected = false;
    get selected() {
        return this.#selected;
    }
    set selected(value) {
        this.#selected = value;
        if (this._component) {
            this._component.selected = this.#selected;
        }
    }
    #disabled = false;
    get disabled() {
        return this.#disabled;
    }
    set disabled(value) {
        this.#disabled = value;
        if (this._component) {
            this._component.disabled = this.#disabled;
        }
    }
    #pathAddendum = new UmbRoutePathAddendumContext(this);
    #onSelected(event) {
        event.stopPropagation();
        const unique = this.item?.unique;
        if (!unique)
            throw new Error('No unique id found for item');
        this.dispatchEvent(new UmbSelectedEvent(unique));
    }
    #onDeselected(event) {
        event.stopPropagation();
        const unique = this.item?.unique;
        if (!unique)
            throw new Error('No unique id found for item');
        this.dispatchEvent(new UmbDeselectedEvent(unique));
    }
    firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);
        this.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'entity-item-ref');
    }
    #boundOnSelected = this.#onSelected.bind(this);
    #boundOnDeselected = this.#onDeselected.bind(this);
    #createController(entityType) {
        if (this.#extensionsController) {
            this.#extensionsController.destroy();
        }
        this.#extensionsController = new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, 'entityItemRef', (manifest) => manifest.forEntityTypes.includes(entityType), (extensionControllers) => {
            this._component?.remove();
            const component = extensionControllers[0]?.component || document.createElement('umb-default-item-ref');
            // TODO: I would say this code can use feature of the UmbExtensionsElementInitializer, to set properties and get a fallback element. [NL]
            // assign the properties to the component
            component.item = this.item;
            component.readonly = this.readonly;
            component.standalone = this.standalone;
            component.selectOnly = this.selectOnly;
            component.selectable = this.selectable;
            component.selected = this.selected;
            component.disabled = this.disabled;
            component.addEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected);
            component.addEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected);
            // Proxy the actions slot to the component
            const slotElement = document.createElement('slot');
            slotElement.name = 'actions';
            slotElement.setAttribute('slot', 'actions');
            component.appendChild(slotElement);
            this._component = component;
        }, undefined, // We can leave the alias to undefined, as we destroy this our selfs.
        undefined, { single: true });
    }
    render() {
        if (this._component) {
            return html `${this._component}`;
        }
        // Error:
        if (this.error) {
            return html `
				<uui-ref-node
					style="color: var(--uui-color-danger);"
					.name=${this.localize.string(this.errorMessage ?? '#general_notFound')}
					.detail=${this.errorDetail ?? ''}
					.readonly=${this.readonly}
					.standalone=${this.standalone}
					.selectOnly=${this.selectOnly}
					.selected=${this.selected}
					.disabled=${this.disabled}>
					<uui-icon slot="icon" name="icon-alert" style="color: var(--uui-color-danger);"></uui-icon>
					<slot name="actions"></slot>
				</uui-ref-node>
			`;
        }
        // Loading:
        return html `<uui-loader-bar id="loader"></uui-loader-bar>`;
    }
    destroy() {
        this._component?.removeEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected);
        this._component?.removeEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected);
        super.destroy();
    }
    static { this.styles = [
        css `
			:host {
				display: block;
				position: relative;
			}

			#loader {
				margin-top: 10px;
				opacity: 0;
				animation: show-loader 0s 120ms forwards;
			}

			@keyframes show-loader {
				to {
					opacity: 1;
				}
			}

			:host::after {
				content: '';
				position: absolute;
				z-index: 1;
				pointer-events: none;
				inset: 0;
				border: 1px solid transparent;
				border-radius: var(--uui-border-radius);

				transition: border-color 240ms ease-in;
			}

			:host([drag-placeholder]) {
				--uui-color-focus: transparent;
			}

			:host([drag-placeholder])::after {
				display: block;
				border-width: 2px;
				border-color: var(--uui-color-interactive-emphasis);
				animation: ${UUIBlinkAnimationValue};
			}
			:host([drag-placeholder])::before {
				content: '';
				position: absolute;
				pointer-events: none;
				inset: 0;
				border-radius: var(--uui-border-radius);
				background-color: var(--uui-color-interactive-emphasis);
				opacity: 0.12;
			}
			:host([drag-placeholder]) > * {
				transition: opacity 50ms 16ms;
				opacity: 0;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbEntityItemRefElement.prototype, "_component", void 0);
__decorate([
    property({ type: Object, attribute: false })
], UmbEntityItemRefElement.prototype, "item", null);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbEntityItemRefElement.prototype, "readonly", null);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbEntityItemRefElement.prototype, "standalone", null);
__decorate([
    property({ type: Boolean, attribute: 'select-only', reflect: true })
], UmbEntityItemRefElement.prototype, "selectOnly", null);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbEntityItemRefElement.prototype, "selectable", null);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbEntityItemRefElement.prototype, "selected", null);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbEntityItemRefElement.prototype, "disabled", null);
__decorate([
    property({ type: Boolean })
], UmbEntityItemRefElement.prototype, "error", void 0);
__decorate([
    property({ type: String, attribute: 'error-message', reflect: false })
], UmbEntityItemRefElement.prototype, "errorMessage", void 0);
__decorate([
    property({ type: String, attribute: 'error-detail', reflect: false })
], UmbEntityItemRefElement.prototype, "errorDetail", void 0);
UmbEntityItemRefElement = __decorate([
    customElement('umb-entity-item-ref')
], UmbEntityItemRefElement);
export { UmbEntityItemRefElement };
export { UmbEntityItemRefElement as element };
