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, nothing, property, repeat } from '../../../../external/lit/index.js';
import { debounce } from '../../../core/utils/index.js';
import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
import { UmbExtensionsElementAndApiInitializer } from '../../../../libs/extension-api/index.js';
import { UmbLitElement } from '../../../core/lit-element/index.js';
import '../cascading-menu-popover/cascading-menu-popover.element.js';
/**
 * Provides a sticky toolbar for the {@link UmbInputTiptapElement}
 * @element umb-tiptap-toolbar
 * @cssprop --umb-tiptap-edge-border-color - Defines the edge border color
 * @cssprop --umb-tiptap-top - Defines the top value for the sticky toolbar
 */
let UmbTiptapToolbarElement = class UmbTiptapToolbarElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.#attached = false;
        this.#debouncer = debounce(() => this.requestUpdate(), 100);
        this.#lookup = new Map();
        this.readonly = false;
        this.toolbar = [[[]]];
    }
    #attached;
    #debouncer;
    #extensionsController;
    #lookup;
    connectedCallback() {
        super.connectedCallback();
        this.#attached = true;
        this.#observeExtensions();
    }
    disconnectedCallback() {
        this.#attached = false;
        this.#extensionsController?.destroy();
        this.#extensionsController = undefined;
        super.disconnectedCallback();
    }
    #observeExtensions() {
        if (!this.#attached)
            return;
        this.#extensionsController?.destroy();
        this.#extensionsController = new UmbExtensionsElementAndApiInitializer(this, umbExtensionsRegistry, 'tiptapToolbarExtension', [], (manifest) => this.toolbar.flat(2).includes(manifest.alias), (extensionControllers) => {
            extensionControllers.forEach((ext) => {
                if (!this.#lookup.has(ext.alias)) {
                    ext.component?.setAttribute('data-mark', `action:tiptap-toolbar:${ext.alias}`);
                    this.#lookup.set(ext.alias, ext.component);
                    this.#debouncer();
                }
            });
        }, undefined, undefined, () => import('../../extensions/default-tiptap-toolbar-api.js'));
        this.#extensionsController.apiProperties = { configuration: this.configuration };
        this.#extensionsController.elementProperties = { editor: this.editor, configuration: this.configuration };
    }
    render() {
        if (!this.toolbar.flat(2).length)
            return nothing;
        return this.#renderRows(this.toolbar);
    }
    #renderRows(rows) {
        return repeat(rows, (row) => html `<div class="row">${this.#renderGroups(row)}</div>`);
    }
    #renderGroups(groups) {
        return repeat(groups, (group) => html `<div class="group">${this.#renderActions(group)}</div>`);
    }
    #renderActions(aliases) {
        return repeat(aliases, (alias) => this.#lookup?.get(alias) ?? this.#renderActionPlaceholder(alias));
    }
    #renderActionPlaceholder(alias) {
        return html `<span class="skeleton" role="none" title="Loading '${alias}'"></span>`;
    }
    static { this.styles = css `
		:host([readonly]) {
			pointer-events: none;
			background-color: var(--uui-color-surface-alt);
		}

		:host {
			border-radius: var(--uui-border-radius);
			border: 1px solid var(--uui-color-border);
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;

			border-top-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
			border-left-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
			border-right-color: var(--umb-tiptap-edge-border-color, var(--uui-color-border));
			box-sizing: border-box;

			background-color: var(--uui-color-surface);
			color: var(--color-text);
			font-size: var(--uui-type-default-size);

			display: flex;
			flex-direction: column;

			position: sticky;
			top: var(--umb-tiptap-top, -25px);
			left: 0;
			right: 0;
			padding: var(--uui-size-3);
			z-index: 9999999;

			box-shadow:
				0 2px 2px -2px rgba(34, 47, 62, 0.1),
				0 8px 8px -4px rgba(34, 47, 62, 0.07);
		}

		.row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			min-height: var(--uui-size-12, 36px);

			.group {
				display: inline-flex;
				flex-wrap: wrap;
				align-items: stretch;

				min-height: var(--uui-size-12, 36px);

				&:not(:last-child)::after {
					content: '';
					background-color: var(--uui-color-border);
					width: 1px;
					place-self: center;
					height: var(--uui-size-7, 21px);
					margin: 0 var(--uui-size-3);
				}
			}
		}

		.skeleton {
			background-color: var(--uui-color-background);
			height: var(--uui-size-12, 36px);
			width: var(--uui-size-10, 30px);
			margin-left: 1px;
		}
	`; }
};
__decorate([
    property({ type: Boolean, reflect: true })
], UmbTiptapToolbarElement.prototype, "readonly", void 0);
__decorate([
    property({ attribute: false })
], UmbTiptapToolbarElement.prototype, "editor", void 0);
__decorate([
    property({ attribute: false })
], UmbTiptapToolbarElement.prototype, "configuration", void 0);
__decorate([
    property({ attribute: false })
], UmbTiptapToolbarElement.prototype, "toolbar", void 0);
UmbTiptapToolbarElement = __decorate([
    customElement('umb-tiptap-toolbar')
], UmbTiptapToolbarElement);
export { UmbTiptapToolbarElement };
