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 { UmbTiptapToolbarConfigurationContext } from './tiptap-toolbar-configuration.context.js';
import { css, customElement, html, property, repeat, when } from '../../../../external/lit/index.js';
import { UmbChangeEvent } from '../../../core/event/index.js';
import { UmbLitElement } from '../../../core/lit-element/index.js';
import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '../../../core/sorter/index.js';
let UmbTiptapToolbarGroupConfigurationElement = class UmbTiptapToolbarGroupConfigurationElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.#sorter = new UmbSorterController(this, {
            getUniqueOfElement: (element) => element.dataset.mark,
            getUniqueOfModel: (modelEntry) => `tiptap-toolbar-item:${modelEntry.alias}`,
            itemSelector: '.draggable',
            identifier: 'umb-tiptap-toolbar-sorter',
            containerSelector: '.items',
            resolvePlacement: UmbSorterResolvePlacementAsGrid,
            onContainerChange: ({ item, model }) => {
                this.dispatchEvent(new CustomEvent('container-change', { detail: { item, model } }));
            },
            onChange: ({ model }) => {
                this.#items = model;
                this.requestUpdate();
                this.dispatchEvent(new UmbChangeEvent());
            },
        });
        this.#context = new UmbTiptapToolbarConfigurationContext(this);
        this.#items = [];
        this.rowIndex = 0;
        this.groupIndex = 0;
    }
    #sorter;
    #context;
    set items(value) {
        this.#items = (value ?? []).filter((item, index, self) => self.findIndex((x) => x.alias === item.alias) === index);
        this.#sorter.setModel(this.#items);
    }
    get items() {
        return this.#items;
    }
    #items;
    #onRequestRemove(item, index = 0) {
        this.items = this.items.filter((x) => x.alias !== item.alias);
        const rowIndex = this.rowIndex;
        const groupIndex = this.groupIndex;
        this.dispatchEvent(new CustomEvent('remove', { detail: { rowIndex, groupIndex, index }, bubbles: true, composed: true }));
    }
    render() {
        return html `
			<div class="items">
				${when(this.items?.length === 0, () => html `<em><umb-localize key="tiptap_toolbar_emptyGroup">Empty</umb-localize></em>`, () => repeat(this.items, (item) => item.alias, (item, index) => this.#renderItem(item, index)))}
			</div>
		`;
    }
    #renderItem(item, index = 0) {
        const label = this.localize.string(item.label) || item.alias;
        const forbidden = !this.#context?.isExtensionEnabled(item.alias);
        switch (item.kind) {
            case 'styleMenu':
            case 'menu':
                return html `
					<uui-button
						compact
						class="draggable ${forbidden ? 'forbidden' : ''}"
						data-mark="tiptap-toolbar-item:${item.alias}"
						look=${forbidden ? 'placeholder' : 'outline'}
						label=${label}
						title=${label}
						@click=${() => this.#onRequestRemove(item, index)}>
						<div class="inner">
							<span>${label}</span>
						</div>
						<uui-symbol-expand slot="extra" open></uui-symbol-expand>
					</uui-button>
				`;
            case 'unknown':
                return html `
					<uui-button
						compact
						data-mark="tiptap-toolbar-item:${item.alias}"
						color="danger"
						look="placeholder"
						label="Missing extension"
						title="Missing extension: ${item.alias}"
						@click=${() => this.#onRequestRemove(item, index)}></uui-button>
				`;
            case 'button':
            case 'colorPickerButton':
            default:
                return html `
					<uui-button
						compact
						class="draggable ${forbidden ? 'forbidden' : ''}"
						data-mark="tiptap-toolbar-item:${item.alias}"
						look=${forbidden ? 'placeholder' : 'outline'}
						label=${label}
						title=${label}
						@click=${() => this.#onRequestRemove(item, index)}>
						<div class="inner">
							${when(item.icon, () => html `<umb-icon .name=${item.icon}></umb-icon>`, () => html `<span>${label}</span>`)}
						</div>
					</uui-button>
				`;
        }
    }
    static { this.styles = [
        css `
			.items {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: var(--uui-size-1);

				uui-button {
					--uui-button-font-weight: normal;

					&.draggable,
					&.draggable > .inner {
						cursor: move;
					}

					&.forbidden {
						--color: var(--uui-color-danger);
						--color-standalone: var(--uui-color-danger-standalone);
						--color-emphasis: var(--uui-color-danger-emphasis);
						--color-contrast: var(--uui-color-danger);
						--uui-button-contrast: var(--uui-color-danger);
						--uui-button-border-color: var(--uui-color-danger);
					}

					div {
						display: flex;
						gap: var(--uui-size-1);
						align-items: flex-end;
					}

					uui-symbol-expand {
						margin-left: var(--uui-size-space-2);
					}
				}
			}

			uui-button[look='outline'] {
				--uui-button-background-color-hover: var(--uui-color-surface);
			}
		`,
    ]; }
};
__decorate([
    property({ type: Array, attribute: false })
], UmbTiptapToolbarGroupConfigurationElement.prototype, "items", null);
__decorate([
    property({ type: Number })
], UmbTiptapToolbarGroupConfigurationElement.prototype, "rowIndex", void 0);
__decorate([
    property({ type: Number })
], UmbTiptapToolbarGroupConfigurationElement.prototype, "groupIndex", void 0);
UmbTiptapToolbarGroupConfigurationElement = __decorate([
    customElement('umb-tiptap-toolbar-group-configuration')
], UmbTiptapToolbarGroupConfigurationElement);
export { UmbTiptapToolbarGroupConfigurationElement };
export default UmbTiptapToolbarGroupConfigurationElement;
