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 { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context-token.js';
import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
import { UmbTextStyles } from '../../../../../core/style/index.js';
import { UmbLitElement } from '../../../../../core/lit-element/index.js';
let UmbMediaTypeWorkspaceViewStructureElement = class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement {
    #workspaceContext;
    constructor() {
        super();
        this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (context) => {
            this.#workspaceContext = context;
            this._observeMediaType();
        });
    }
    _observeMediaType() {
        if (!this.#workspaceContext)
            return;
        this.observe(this.#workspaceContext.allowedAtRoot, (allowedAtRoot) => (this._allowedAtRoot = allowedAtRoot), '_allowedAtRootObserver');
        this.observe(this.#workspaceContext.allowedContentTypes, (allowedContentTypes) => {
            const oldValue = this._allowedContentTypeIDs;
            this._allowedContentTypeIDs = allowedContentTypes
                ?.map((x) => x.contentType.unique)
                .filter((x) => x !== undefined);
            this.requestUpdate('_allowedContentTypeIDs', oldValue);
        }, '_allowedContentTypesObserver');
        this.observe(this.#workspaceContext.collection, (collection) => {
            this._collection = collection?.unique;
        }, '_collectionObserver');
    }
    render() {
        return html `
			<uui-box headline=${this.localize.term('contentTypeEditor_structure')}>
				<umb-property-layout alias="Root" label=${this.localize.term('contentTypeEditor_allowAtRootHeading')}>
					<div slot="description">${this.localize.term('contentTypeEditor_allowAtRootDescription')}</div>
					<div slot="editor">
						<uui-toggle
							label=${this.localize.term('contentTypeEditor_allowAtRootHeading')}
							?checked=${this._allowedAtRoot}
							@change=${(e) => {
            this.#workspaceContext?.setAllowedAtRoot(e.target.checked);
        }}></uui-toggle>
					</div>
				</umb-property-layout>
				<umb-property-layout alias="ChildNodeType" label=${this.localize.term('contentTypeEditor_childNodesHeading')}>
					<div slot="description">${this.localize.term('contentTypeEditor_childNodesDescription')}</div>
					<div slot="editor">
						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
						<umb-input-media-type
							.selection=${this._allowedContentTypeIDs ?? []}
							@change="${(e) => {
            const sortedContentTypesList = e.target.selection.map((id, index) => ({
                contentType: { unique: id },
                sortOrder: index,
            }));
            this.#workspaceContext?.setAllowedContentTypes(sortedContentTypesList);
        }}">
						</umb-input-media-type>
					</div>
				</umb-property-layout>
			</uui-box>
			<uui-box headline=${this.localize.term('contentTypeEditor_presentation')}>
				<umb-property-layout alias="collection" label="${this.localize.term('contentTypeEditor_collections')}">
					<div slot="description">${this.localize.term('contentTypeEditor_collectionsDescription')}</div>
					<div slot="editor">
						<umb-input-content-type-collection-configuration
							default-value="3a0156c4-3b8c-4803-bdc1-6871faa83fff"
							.value=${this._collection}
							@change=${(e) => {
            const unique = e.target.value;
            this.#workspaceContext?.setCollection({ unique });
        }}>
						</umb-input-content-type-collection-configuration>
					</div>
				</umb-property-layout>
			</uui-box>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: block;
				margin: var(--uui-size-layout-1);
				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
			}
			uui-box {
				margin-top: var(--uui-size-layout-1);
			}
			uui-label,
			umb-property-editor-ui-number {
				display: block;
			}

			// TODO: is this necessary?
			uui-toggle {
				display: flex;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbMediaTypeWorkspaceViewStructureElement.prototype, "_allowedAtRoot", void 0);
__decorate([
    state()
], UmbMediaTypeWorkspaceViewStructureElement.prototype, "_allowedContentTypeIDs", void 0);
__decorate([
    state()
], UmbMediaTypeWorkspaceViewStructureElement.prototype, "_collection", void 0);
UmbMediaTypeWorkspaceViewStructureElement = __decorate([
    customElement('umb-media-type-workspace-view-structure')
], UmbMediaTypeWorkspaceViewStructureElement);
export { UmbMediaTypeWorkspaceViewStructureElement };
export default UmbMediaTypeWorkspaceViewStructureElement;
