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 { UMB_WEBHOOK_EVENTS_MODAL } from './modal/webhook-events-modal.token.js';
import { css, html, customElement, property, repeat, nothing } from '../../../external/lit/index.js';
import { UmbLitElement } from '../../core/lit-element/index.js';
import { UmbTextStyles } from '../../core/style/index.js';
import '../../core/culture/index.js';
import { UMB_MODAL_MANAGER_CONTEXT } from '../../core/modal/index.js';
import { UmbChangeEvent } from '../../core/event/index.js';
let UmbInputWebhookEventsElement = class UmbInputWebhookEventsElement extends UmbLitElement {
    constructor() {
        super();
        this.events = [];
        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
            this._modalContext = _instance;
        });
    }
    async #openModal() {
        const modal = this._modalContext?.open(this, UMB_WEBHOOK_EVENTS_MODAL, {
            modal: { type: 'sidebar' },
            data: { events: this.events },
        });
        if (!modal)
            return;
        await modal.onSubmit();
        this.events = modal.getValue().events;
        modal.destroy();
        this.dispatchEvent(new UmbChangeEvent());
    }
    #removeEvent(alias) {
        this.events = this.events.filter((item) => item.alias !== alias);
        this.dispatchEvent(new UmbChangeEvent());
    }
    #renderEvents() {
        if (!this.events.length)
            return nothing;
        return html `
			<uui-ref-list>
				${repeat(this.events, (item) => item.alias, (item) => html `
						<uui-ref-node name=${item.eventName} @open=${this.#openModal}>
							<umb-icon slot="icon" name="icon-globe"></umb-icon>
							<uui-action-bar slot="actions">
								<uui-button
									label=${this.localize.term('general_remove')}
									@click=${() => this.#removeEvent(item.alias)}></uui-button>
							</uui-action-bar>
						</uui-ref-node>
					`)}
			</uui-ref-list>
		`;
    }
    render() {
        return html `${this.#renderEvents()}
			<uui-button
				id="btn-add"
				look="placeholder"
				label=${this.localize.term('general_choose')}
				@click=${this.#openModal}></uui-button>`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#btn-add {
				display: block;
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbInputWebhookEventsElement.prototype, "events", void 0);
UmbInputWebhookEventsElement = __decorate([
    customElement('umb-input-webhook-events')
], UmbInputWebhookEventsElement);
export { UmbInputWebhookEventsElement };
export default UmbInputWebhookEventsElement;
