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 { UmbLitElement } from '../../../../core/lit-element/index.js';
import { html, customElement, property, css, state, repeat, nothing } from '../../../../../external/lit/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../../../data-type/index.js';
import { UmbRepositoryItemsManager } from '../../../../core/repository/index.js';
import { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, } from '../../../../documents/document-types/index.js';
import { UmbChangeEvent } from '../../../../core/event/index.js';
let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEditorUIBlockGridAreaTypePermissionElement extends UmbLitElement {
    set value(value) {
        this._value = value ?? [];
    }
    get value() {
        return this._value;
    }
    #itemsManager;
    constructor() {
        super();
        this._value = [];
        this._blockTypesWithElementName = [];
        this._blockGroups = [];
        this.#itemsManager = new UmbRepositoryItemsManager(this, UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS);
        this.observe(this.#itemsManager.items, (items) => {
            this._blockTypesWithElementName = items
                .map((item) => {
                const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
                if (blockType) {
                    return { type: blockType, name: item.name, icon: item.icon };
                }
                return undefined;
            })
                .filter((x) => x !== undefined);
        });
        this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
            this.observe(await context?.propertyValueByAlias('blocks'), (blockTypes) => {
                this._blockTypes = blockTypes ?? [];
                this.#itemsManager.setUniques(this._blockTypes.map((block) => block.contentElementTypeKey));
            }, 'observeBlockType');
            this.observe(await context?.propertyValueByAlias('blockGroups'), (blockGroups) => {
                this._blockGroups = blockGroups ?? [];
            }, 'observeBlockGroups');
        }).passContextAliasMatches();
    }
    #addNewPermission() {
        this.value = [...this.value, { minAllowed: 0, maxAllowed: undefined }];
        this.dispatchEvent(new UmbChangeEvent());
    }
    #setPermissionKey(e, index) {
        const value = [...this.value];
        const optionElement = e.composedPath()[0];
        const optionKey = optionElement.value;
        // If optionKey exists (new option picked), we just assume its a elementType if the key is not from blockGroups.
        // If optionKey is empty (the option removed was removed), set both to undefined.
        const setting = optionKey
            ? this._blockGroups.find((group) => group.key === optionKey)
                ? { elementTypeKey: undefined, groupKey: optionKey }
                : { elementTypeKey: optionKey, groupKey: undefined }
            : { elementTypeKey: undefined, groupKey: undefined };
        this.value = value.map((permission, i) => (i === index ? { ...permission, ...setting } : permission));
        this.dispatchEvent(new UmbChangeEvent());
    }
    #setPermissionMinimumRange(e, index) {
        const value = [...this.value];
        const input = e.target.value;
        this.value = value.map((permission, i) => i === index ? { ...permission, minAllowed: parseInt(input) ?? 0 } : permission);
        this.dispatchEvent(new UmbChangeEvent());
    }
    #setPermissionMaximumRange(e, index) {
        const value = [...this.value];
        const input = e.target.value;
        this.value = value.map((permission, i) => i === index ? { ...permission, maxAllowed: parseInt(input) ?? undefined } : permission);
        this.dispatchEvent(new UmbChangeEvent());
    }
    #remove(index) {
        this.value = [...this.value].filter((_, i) => i !== index);
        this.dispatchEvent(new UmbChangeEvent());
    }
    render() {
        if (this._blockTypes === undefined) {
            return nothing;
        }
        if (this._blockTypesWithElementName.length === 0) {
            return 'There must be one Block Type created before permissions can be configured.';
        }
        return html `<div id="permissions">
				${repeat(this._value, (permission) => permission, (permission, index) => {
            const showCategoryHeader = this._blockGroups.length > 0 && this._blockTypesWithElementName.length > 0;
            return html `<div class="permission-setting">
							<uui-combobox
								@change=${(e) => this.#setPermissionKey(e, index)}
								.value=${permission.elementTypeKey ?? permission.groupKey ?? ''}>
								<uui-combobox-list>
									${showCategoryHeader ? html `<strong>${this.localize.term('general_groups')}</strong>` : nothing}
									${this.#renderBlockGroups(permission)}
									${showCategoryHeader ? html `<strong>${this.localize.term('general_elements')}</strong>` : nothing}
									${this.#renderBlockTypes(permission)}
								</uui-combobox-list>
							</uui-combobox>
							<span>
								<uui-input
									type="number"
									placeholder="0"
									min="0"
									.value=${permission.minAllowed}
									@change=${(e) => this.#setPermissionMinimumRange(e, index)}></uui-input>
								-
								<uui-input
									type="number"
									placeholder="&infin;"
									min="0"
									.value=${permission.maxAllowed}
									@change=${(e) => this.#setPermissionMaximumRange(e, index)}></uui-input>
								<uui-button
									label=${this.localize.term('general_remove')}
									look="secondary"
									compact
									@click=${() => this.#remove(index)}>
									<uui-icon name="icon-trash"></uui-icon>
								</uui-button>
							</span>
						</div>`;
        })}
			</div>
			<uui-button
				id="add-button"
				look="placeholder"
				label=${this.localize.term('general_add')}
				@click=${this.#addNewPermission}></uui-button>
			${!this._value.length
            ? html `<small>
						<umb-localize key="blockEditor_areaAllowedBlocksEmpty">
							By default, all block types are allowed in an Area, Use this option to allow only selected types.
						</umb-localize>
					</small>`
            : nothing} `;
    }
    #renderBlockGroups(area) {
        return repeat(this._blockGroups, (group) => group.key, (group) => html `<uui-combobox-list-option .value=${group.key} ?selected=${area.groupKey === group.key}>
					<umb-icon name="icon-folder"></umb-icon>
					${this.localize.string(group.name)}
				</uui-combobox-list-option>`);
    }
    #renderBlockTypes(area) {
        return repeat(this._blockTypesWithElementName, (block) => block.type.contentElementTypeKey, (block) => html `<uui-combobox-list-option
					.value=${block.type.contentElementTypeKey}
					?selected=${area.elementTypeKey === block.type.contentElementTypeKey}>
					<umb-icon name=${block.icon}></umb-icon>
					${this.localize.string(block.name)}
				</uui-combobox-list-option>`);
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#permissions {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-3);
				margin-bottom: var(--uui-size-space-3);
			}

			#add-button {
				width: 100%;
			}

			.permission-setting {
				flex: 1;
				display: flex;
				gap: var(--uui-size-space-6);
			}

			.permission-setting > uui-combobox {
				flex: 1;
			}

			.permission-setting > span {
				display: flex;
				gap: var(--uui-size-space-1);
				align-items: center;
			}

			uui-combobox strong {
				padding: var(--uui-size-space-2);
			}

			uui-combobox-list-option {
				display: flex;
				align-items: center;
				gap: var(--uui-size-space-2);
				padding: var(--uui-size-2);
			}
		`,
    ]; }
};
__decorate([
    property({ type: Array })
], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "value", null);
__decorate([
    state()
], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_value", void 0);
__decorate([
    state()
], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockTypes", void 0);
__decorate([
    state()
], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockTypesWithElementName", void 0);
__decorate([
    state()
], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockGroups", void 0);
UmbPropertyEditorUIBlockGridAreaTypePermissionElement = __decorate([
    customElement('umb-property-editor-ui-block-grid-area-type-permission')
], UmbPropertyEditorUIBlockGridAreaTypePermissionElement);
export { UmbPropertyEditorUIBlockGridAreaTypePermissionElement };
export default UmbPropertyEditorUIBlockGridAreaTypePermissionElement;
