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, state } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbSorterController } from '../../../../core/sorter/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
// import of local components
import './components/index.js';
import { UmbChangeEvent } from '../../../../core/event/index.js';
/**
 * @element umb-property-editor-ui-collection-column-configuration
 */
let UmbPropertyEditorUICollectionColumnConfigurationElement = class UmbPropertyEditorUICollectionColumnConfigurationElement extends UmbLitElement {
    #sorter = new UmbSorterController(this, {
        getUniqueOfElement: (element) => element.id,
        getUniqueOfModel: (modelEntry) => modelEntry.alias,
        itemSelector: '.layout-item',
        containerSelector: '#layout-wrapper',
        onChange: ({ model }) => {
            this.value = model;
            this.dispatchEvent(new UmbChangeEvent());
        },
    });
    set value(value) {
        this.#value = value ?? [];
        this.#sorter.setModel(this.#value);
    }
    get value() {
        return this.#value;
    }
    #value = [];
    #onAdd(e) {
        const element = e.target;
        if (!element.selectedProperty)
            return;
        this._field = element.selectedProperty;
        const duplicate = this.value?.find((config) => this._field?.alias === config.alias);
        if (duplicate) {
            // TODO: Show error to user, can not add duplicate field/column. [LK]
            throw new Error('Duplicate field/columns are not allowed.');
            return;
        }
        const config = {
            alias: this._field.alias,
            header: this._field.label,
            isSystem: this._field.isSystem ? 1 : 0,
        };
        this.value = [...(this.value ?? []), config];
        this.dispatchEvent(new UmbChangeEvent());
    }
    #onChangeLabel(e, configuration) {
        this.value = this.value?.map((config) => config.alias === configuration.alias ? { ...config, header: e.target.value } : config);
        this.dispatchEvent(new UmbChangeEvent());
    }
    #onChangeNameTemplate(e, configuration) {
        this.value = this.value?.map((config) => config.alias === configuration.alias ? { ...config, nameTemplate: e.target.value } : config);
        this.dispatchEvent(new UmbChangeEvent());
    }
    #onRemove(unique) {
        const newValue = [];
        this.value?.forEach((config) => {
            if (config.alias !== unique)
                newValue.push(config);
        });
        this.value = newValue;
        this.dispatchEvent(new UmbChangeEvent());
    }
    render() {
        return html `
			<div id="layout-wrapper">${this.#renderColumns()}</div>
			${this.#renderInput()}
		`;
    }
    #renderInput() {
        return html `
			<umb-input-collection-content-type-property
				document-types
				media-types
				@change=${this.#onAdd}></umb-input-collection-content-type-property>
		`;
    }
    #renderColumns() {
        if (!this.value)
            return nothing;
        return repeat(this.value, (column) => column.alias, (column) => this.#renderColumn(column));
    }
    #renderColumn(column) {
        return html `
			<div class="layout-item" id=${column.alias}>
				<uui-icon class="drag-handle" name="icon-grip"></uui-icon>

				<uui-input
					required
					label="label"
					placeholder="Enter a label..."
					.value=${column.header ?? ''}
					@change=${(e) => this.#onChangeLabel(e, column)}></uui-input>

				<div class="alias">
					<code>${column.alias}</code>
				</div>

				<uui-input
					label="template"
					placeholder="Enter a label template..."
					.value=${column.nameTemplate ?? ''}
					@change=${(e) => this.#onChangeNameTemplate(e, column)}></uui-input>

				<div class="actions">
					<uui-button
						label=${this.localize.term('general_remove')}
						look="secondary"
						@click=${() => this.#onRemove(column.alias)}></uui-button>
				</div>
			</div>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#layout-wrapper {
				display: flex;
				flex-direction: column;
				gap: 1px;
				margin-bottom: var(--uui-size-1);
			}

			.layout-item {
				background-color: var(--uui-color-surface-alt);
				display: flex;
				align-items: center;
				gap: var(--uui-size-6);
				padding: var(--uui-size-3) var(--uui-size-6);
			}

			.layout-item > uui-icon {
				flex: 0 0 var(--uui-size-6);
			}

			.layout-item > uui-input,
			.layout-item > .alias {
				flex: 1;
			}

			.layout-item > .actions {
				flex: 0 0 auto;
				display: flex;
				justify-content: flex-end;
			}

			.drag-handle {
				cursor: grab;
			}

			.drag-handle:active {
				cursor: grabbing;
			}
		`,
    ]; }
};
__decorate([
    property({ type: Array })
], UmbPropertyEditorUICollectionColumnConfigurationElement.prototype, "value", null);
__decorate([
    property({ type: Object, attribute: false })
], UmbPropertyEditorUICollectionColumnConfigurationElement.prototype, "config", void 0);
__decorate([
    state()
], UmbPropertyEditorUICollectionColumnConfigurationElement.prototype, "_field", void 0);
UmbPropertyEditorUICollectionColumnConfigurationElement = __decorate([
    customElement('umb-property-editor-ui-collection-column-configuration')
], UmbPropertyEditorUICollectionColumnConfigurationElement);
export { UmbPropertyEditorUICollectionColumnConfigurationElement };
export default UmbPropertyEditorUICollectionColumnConfigurationElement;
