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, when } from '../../../../../../external/lit/index.js';
import { umbConfirmModal } from '../../../../../core/modal/index.js';
import { UmbLitElement, umbFocus } from '../../../../../core/lit-element/index.js';
import { UmbTextStyles } from '../../../../../core/style/index.js';
import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '../../../../../../external/uui/index.js';
import './content-type-design-editor-properties.element.js';
let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.sortModeActive = false;
    }
    set group(value) {
        if (value === this._group)
            return;
        this._group = value;
        this._groupId = value?.ownerId ?? value?.ids[0];
        this.#checkInherited();
    }
    get group() {
        return this._group;
    }
    set groupStructureHelper(value) {
        if (value === this._groupStructureHelper)
            return;
        this._groupStructureHelper = value;
        this.#checkInherited();
    }
    get groupStructureHelper() {
        return this._groupStructureHelper;
    }
    #checkInherited() {
        if (this.groupStructureHelper && this.group) {
            // Check is this container matches with any other group. If so it is inherited aka. merged with others. [NL]
            if (this.group.ownerId) {
                this._hasOwnerContainer = true;
            }
            const notOwnerContainerIds = this.group.ids.filter((id) => id !== this.group.ownerId);
            if (notOwnerContainerIds.length > 0) {
                this._inheritedFrom = notOwnerContainerIds
                    .map((id) => this.groupStructureHelper.getContentTypeOfContainer(id))
                    .filter((contentType) => contentType !== undefined);
                this._inherited = true;
            }
            else {
                this._inheritedFrom = undefined;
                this._inherited = false;
            }
        }
    }
    #singleValueUpdate(propertyName, value) {
        if (!this._groupStructureHelper || !this._group)
            return;
        const ownerId = this._group.ownerId;
        if (!ownerId)
            return;
        const partialObject = {};
        partialObject[propertyName] = value;
        this._groupStructureHelper.partialUpdateContainer(ownerId, partialObject);
    }
    #renameGroup(e) {
        if (!this.groupStructureHelper || !this._group)
            return;
        const ownerId = this._group.ownerId;
        if (!ownerId)
            return;
        let newName = e.target.value;
        // TODO: This does not seem right, the detection of a unique name requires better awareness on the level of the change. [NL]
        // This seem to use check for root containers.
        const changedName = this.groupStructureHelper
            .getStructureManager()
            .makeContainerNameUniqueForOwnerContentType(ownerId, newName);
        if (changedName) {
            newName = changedName;
        }
        this.#singleValueUpdate('name', newName);
        e.target.value = newName;
    }
    #blurGroup(e) {
        if (!this.groupStructureHelper || !this._group)
            return;
        const ownerId = this._group.ownerId;
        if (!ownerId)
            return;
        const newName = e.target.value;
        if (newName === '') {
            const changedName = this.groupStructureHelper.getStructureManager().makeEmptyContainerName(ownerId);
            this.#singleValueUpdate('name', changedName);
            e.target.value = changedName;
        }
    }
    async #requestRemove(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        if (!this.groupStructureHelper || !this._group)
            return;
        if (this._group.ownerId === undefined)
            return;
        // TODO: Do proper localization here: [NL]
        await umbConfirmModal(this, {
            headline: `${this.localize.term('actions_delete')} group`,
            content: html `<umb-localize key="contentTypeEditor_confirmDeleteGroupMessage" .args=${[
                this._group.name ?? this._group.ownerId,
            ]}>
					Are you sure you want to delete the group <strong>${this._group.name ?? this._group.ownerId}</strong>
				</umb-localize>
				</div>`,
            confirmLabel: this.localize.term('actions_delete'),
            color: 'danger',
        });
        this.groupStructureHelper.removeContainer(this._group.ownerId);
    }
    render() {
        if (this._inherited === undefined || !this._groupId)
            return nothing;
        return html `
			<uui-box>
				${this.#renderContainerHeader()}
				<umb-content-type-design-editor-properties
					.editContentTypePath=${this.editContentTypePath}
					.containerId=${this._groupId}></umb-content-type-design-editor-properties>
			</uui-box>
		`;
    }
    // TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN, but we need either a generic type or a way to get the path pattern.... [NL]
    #renderContainerHeader() {
        return html `
			<div slot="header" class="drag-handle">
				<div>
					${when(this.sortModeActive && this._hasOwnerContainer, () => html `<uui-icon name="icon-grip"></uui-icon>`)}
					<uui-input
						id="group-name"
						label=${this.localize.term('contentTypeEditor_group')}
						data-mark="input:group-name"
						placeholder=${this.localize.term('placeholders_entername')}
						.value=${this._group.name}
						?disabled=${!this._hasOwnerContainer}
						@blur=${this.#blurGroup}
						@change=${this.#renameGroup}
						${this._group.name === '' ? umbFocus() : nothing}
						auto-width></uui-input>
				</div>
			</div>
			<div slot="header-actions">
				${when(this._hasOwnerContainer === false && this._inheritedFrom && this._inheritedFrom.length > 0, () => html `
						<uui-tag look="default" class="inherited">
							<uui-icon name="icon-merge"></uui-icon>
							<span
								>${this.localize.term('contentTypeEditor_inheritedFrom')}
								${repeat(this._inheritedFrom, (inherited) => inherited.unique, (inherited) => html `
										<a href=${this.editContentTypePath + 'edit/' + inherited.unique}>${inherited.name}</a>
									`)}
							</span>
						</uui-tag>
					`)}
				${when(!this._inherited && !this.sortModeActive, () => html `
						<uui-button compact label=${this.localize.term('actions_delete')} @click=${this.#requestRemove}>
							<uui-icon name="delete"></uui-icon>
						</uui-button>
					`)}
				${when(this.sortModeActive, () => html `
						<uui-input
							type="number"
							label=${this.localize.term('sort_sortOrder')}
							data-mark="input:sort-order"
							.value=${this.group.sortOrder.toString()}
							?disabled=${!this._hasOwnerContainer}
							@change=${(e) => this.#singleValueUpdate('sortOrder', parseInt(e.target.value) ?? 0)}></uui-input>
					`)}
			</div>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        UUIBlinkKeyframes,
        css `
			:host {
				position: relative;
			}

			:host([drag-placeholder]) {
				opacity: 0.5;
			}

			:host::before,
			:host::after {
				content: '';
				position: absolute;
				pointer-events: none;
				inset: 0;
				border-radius: var(--uui-border-radius);
				opacity: 0;
				transition:
					opacity 60ms linear 1ms,
					border-color,
					10ms;
			}

			:host::after {
				display: block;
				z-index: 1;
				border: 2px solid transparent;
			}

			:host([drag-placeholder])::after {
				opacity: 1;
				border-color: var(--uui-color-interactive-emphasis);
				animation: ${UUIBlinkAnimationValue};
			}
			:host([drag-placeholder])::before {
				background-color: var(--uui-color-interactive-emphasis);
				opacity: 0.12;
			}

			:host([drag-placeholder]) uui-box {
				--uui-box-default-padding: 0;
			}
			:host([drag-placeholder]) div[slot='header'],
			:host([drag-placeholder]) div[slot='header-actions'] {
				transition: opacity 60ms linear 1ms;
				opacity: 0;
			}
			:host([drag-placeholder]) umb-content-type-design-editor-properties {
				visibility: hidden;
				display: none;
			}

			uui-box {
				--uui-box-header-padding: 0;
			}

			div[slot='header'] {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: var(--uui-size-space-4) var(--uui-size-space-5);
			}

			:host([has-owner-container]) div[slot='header'] {
				cursor: grab;
			}

			div[slot='header'] > div {
				display: flex;
				align-items: center;
				gap: var(--uui-size-3);
				width: 100%;
			}

			#group-name {
				--uui-input-border-color: transparent;
				min-width: 200px;
			}

			uui-input[type='number'] {
				max-width: 75px;
			}

			.inherited uui-icon {
				vertical-align: sub;
			}

			div[slot='header-actions'] {
				padding: var(--uui-size-space-4) var(--uui-size-space-5);
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "group", null);
__decorate([
    property({ attribute: false })
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "groupStructureHelper", null);
__decorate([
    property({ type: Boolean, attribute: 'sort-mode-active', reflect: true })
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "sortModeActive", void 0);
__decorate([
    property({ attribute: false })
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "editContentTypePath", void 0);
__decorate([
    state()
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "_groupId", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'has-owner-container' })
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "_hasOwnerContainer", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: 'inherited' })
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "_inherited", void 0);
__decorate([
    state()
], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "_inheritedFrom", void 0);
UmbContentTypeWorkspaceViewEditGroupElement = __decorate([
    customElement('umb-content-type-design-editor-group')
], UmbContentTypeWorkspaceViewEditGroupElement);
export { UmbContentTypeWorkspaceViewEditGroupElement };
export default UmbContentTypeWorkspaceViewEditGroupElement;
