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, state, repeat, when } from '../../../../external/lit/index.js';
import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
import { UmbLitElement } from '../../../core/lit-element/index.js';
import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../core/property/index.js';
import { UmbChangeEvent } from '../../../core/event/index.js';
const TIPTAP_CORE_EXTENSION_ALIAS = 'Umb.Tiptap.RichTextEssentials';
const TIPTAP_BLOCK_EXTENSION_ALIAS = 'Umb.Tiptap.Block';
let UmbPropertyEditorUiTiptapExtensionsConfigurationElement = class UmbPropertyEditorUiTiptapExtensionsConfigurationElement extends UmbLitElement {
    #disabledExtensions;
    constructor() {
        super();
        this.#disabledExtensions = new Set([TIPTAP_CORE_EXTENSION_ALIAS]);
        this.value = [TIPTAP_CORE_EXTENSION_ALIAS];
        this._extensions = [];
        this._groups = [];
        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (dataset) => {
            this.observe(await dataset?.propertyValueByAlias('blocks'), (blocks) => {
                const tmpValue = this.value ? [...this.value] : [];
                // When blocks are configured, the block extension can be enabled;
                // otherwise, the block extension must be disabled.
                if (blocks?.length) {
                    // Check if the block extension is already enabled, if not, add it.
                    if (!tmpValue.includes(TIPTAP_BLOCK_EXTENSION_ALIAS)) {
                        tmpValue.push(TIPTAP_BLOCK_EXTENSION_ALIAS);
                    }
                    this.#disabledExtensions.delete(TIPTAP_BLOCK_EXTENSION_ALIAS);
                }
                else {
                    // Check if the block extension is enabled, if so, remove it.
                    const idx = tmpValue.indexOf(TIPTAP_BLOCK_EXTENSION_ALIAS) ?? -1;
                    if (idx >= 0) {
                        tmpValue.splice(idx, 1);
                    }
                    this.#disabledExtensions.add(TIPTAP_BLOCK_EXTENSION_ALIAS);
                }
                if (!this.value || !this.#isArrayEqualTo(tmpValue, this.value)) {
                    this.#setValue(tmpValue);
                    this.#syncViewModel();
                }
                this.requestUpdate('_extensions');
            }, '_observeBlocks');
        });
    }
    async firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);
        this.observe(umbExtensionsRegistry.byType('tiptapExtension'), (extensions) => {
            this._extensions = extensions
                .sort((a, b) => (b.weight || 0) - (a.weight || 0) || a.alias.localeCompare(b.alias))
                .map((ext) => ({
                alias: ext.alias,
                label: ext.meta.label,
                icon: ext.meta.icon,
                group: ext.meta.group,
                description: ext.meta.description,
            }));
            if (!this.value) {
                // The default value is all extensions enabled
                this.#setValue(this._extensions.map((ext) => ext.alias));
            }
            this.#syncViewModel();
        });
    }
    #isArrayEqualTo(a, b) {
        return a.length === b.length && a.every((item) => b.includes(item)) && b.every((item) => a.includes(item));
    }
    #onClick(item) {
        item.selected = !item.selected;
        const tmpValue = item.selected
            ? [...(this.value ?? []), item.alias]
            : (this.value ?? []).filter((alias) => alias !== item.alias);
        this.#setValue(tmpValue);
    }
    #setValue(value) {
        this.value = value;
        this.dispatchEvent(new UmbChangeEvent());
    }
    #syncViewModel() {
        const items = this._extensions.map((extension) => ({
            ...extension,
            selected: this.value.includes(extension.alias) || extension.alias === TIPTAP_CORE_EXTENSION_ALIAS,
        }));
        const uncategorizedLabel = this.localize.term('tiptap_extGroup_unknown');
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        const grouped = Object.groupBy(items, (item) => item.group || uncategorizedLabel);
        this._groups = Object.keys(grouped)
            .sort((a, b) => a.localeCompare(b))
            .map((key) => ({ group: key, extensions: grouped[key] }));
    }
    render() {
        if (!this._groups.length)
            return nothing;
        return html `
			${repeat(this._groups, (group) => html `
					<div class="group">
						<uui-label>${this.localize.string(group.group)}</uui-label>
						<ul>
							${repeat(group.extensions, (item) => html `
									<li title=${item.description ?? item.alias}>
										<uui-checkbox
											label=${this.localize.string(item.label)}
											value=${item.alias}
											?checked=${item.selected}
											?disabled=${this.#disabledExtensions.has(item.alias)}
											@change=${() => this.#onClick(item)}>
											<div class="inner">
												${when(item.icon, () => html `<umb-icon .name=${item.icon}></umb-icon>`)}
												${when(item.label.startsWith('#'), () => html `<span>${this.localize.string(item.label)}</span>`, () => html `<umb-ufm-render inline .markdown=${item.label}></umb-ufm-render>`)}
											</div>
										</uui-checkbox>
									</li>
								`)}
						</ul>
					</div>
				`)}
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
			}

			.group {
				min-width: 180px;
				width: calc((100% - 3rem) / 4);

				ul {
					list-style: none;
					padding: 0;
					margin: 1rem 0 0;

					.inner {
						display: flex;
						flex-direction: row;
						gap: 0.5rem;

						umb-icon {
							font-size: 1.2rem;
						}
					}
				}
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbPropertyEditorUiTiptapExtensionsConfigurationElement.prototype, "value", void 0);
__decorate([
    property({ attribute: false })
], UmbPropertyEditorUiTiptapExtensionsConfigurationElement.prototype, "config", void 0);
__decorate([
    state()
], UmbPropertyEditorUiTiptapExtensionsConfigurationElement.prototype, "_extensions", void 0);
__decorate([
    state()
], UmbPropertyEditorUiTiptapExtensionsConfigurationElement.prototype, "_groups", void 0);
UmbPropertyEditorUiTiptapExtensionsConfigurationElement = __decorate([
    customElement('umb-property-editor-ui-tiptap-extensions-configuration')
], UmbPropertyEditorUiTiptapExtensionsConfigurationElement);
export { UmbPropertyEditorUiTiptapExtensionsConfigurationElement };
export { UmbPropertyEditorUiTiptapExtensionsConfigurationElement as element };
