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_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
import { UMB_BLOCK_MANAGER_CONTEXT, UMB_BLOCK_WORKSPACE_ALIAS, UmbBlockInsertedEvent, } from '../../../block/index.js';
import { css, customElement, html, nothing, property, state, when } from '../../../../../external/lit/index.js';
import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
import { UmbLanguageItemRepository } from '../../../../language/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
import { UmbContextBoundary } from '../../../../../libs/context-api/index.js';
import { UMB_VIEW_CONTEXT } from '../../../../core/view/index.js';
const apiArgsCreator = (manifest) => {
    return [{ manifest }];
};
/**
 * @element umb-inline-list-block
 */
let UmbInlineListBlockElement = class UmbInlineListBlockElement extends UmbLitElement {
    #manager;
    #blockContext;
    #workspaceContext;
    #contentKey;
    constructor() {
        super();
        this._isOpen = false;
        this.#onBlockInserted = (event) => {
            const blockEvent = event;
            if (blockEvent.detail.layout.contentKey === this.#contentKey) {
                this._isOpen = true;
            }
        };
        this.#expose = () => {
            this.#workspaceContext?.expose();
        };
        this.consumeContext(UMB_BLOCK_LIST_ENTRY_CONTEXT, (blockContext) => {
            this.#blockContext = blockContext;
            this.observe(this.#blockContext?.unique, (contentKey) => {
                this.#contentKey = contentKey;
                this.#load();
            }, 'observeContentKey');
        });
        this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (manager) => {
            if (this.#manager) {
                this.#manager.removeEventListener(UmbBlockInsertedEvent.TYPE, this.#onBlockInserted);
            }
            this.#manager = manager;
            this.#manager?.addEventListener(UmbBlockInsertedEvent.TYPE, this.#onBlockInserted);
        });
        // Block the access to the View Context for this inline block workspace: [NL]
        new UmbContextBoundary(this, UMB_VIEW_CONTEXT);
        new UmbExtensionApiInitializer(this, umbExtensionsRegistry, UMB_BLOCK_WORKSPACE_ALIAS, apiArgsCreator, (permitted, ctrl) => {
            const context = ctrl.api;
            if (permitted && context) {
                this.#workspaceContext = context;
                this.#workspaceContext.establishLiveSync();
                // Avoid view context becoming active: [NL]
                // in this case its not a routable workspace and we do not want it to become an active view, appending shortcuts or setting browser title. (maybe this code needs to be more explicit. Like a inlineMode()?) [NL]
                this.#workspaceContext.view.destroy();
                this.#workspaceContext.autoReportValidation();
                this.#load();
                this.observe(this.#workspaceContext.exposed, (exposed) => {
                    this._exposed = exposed;
                }, 'observeExposed');
                this.observe(context.content.structure.ownerContentTypeName, (name) => {
                    this._ownerContentTypeName = name;
                }, 'observeContentTypeName');
                this.observe(context.variantId, async (variantId) => {
                    if (variantId) {
                        context.content.setup(this, variantId);
                        // TODO: Support segment name?
                        const culture = variantId.culture;
                        if (culture) {
                            const languageRepository = new UmbLanguageItemRepository(this);
                            const { data } = await languageRepository.requestItems([culture]);
                            const name = data?.[0].name;
                            this._variantName = name ? this.localize.string(name) : undefined;
                        }
                    }
                }, 'observeVariant');
                new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [this.#workspaceContext]);
            }
        });
    }
    #load() {
        if (!this.#workspaceContext || !this.#contentKey)
            return;
        this.#workspaceContext.load(this.#contentKey);
    }
    #onBlockInserted;
    #expose;
    render() {
        return html `
			<div id="host">
				<button
					id="open-part"
					tabindex="0"
					@keydown=${(e) => {
            if (e.key !== ' ' && e.key !== 'Enter')
                return;
            e.preventDefault();
            e.stopPropagation();
            this._isOpen = !this._isOpen;
        }}
					@click=${() => {
            this._isOpen = !this._isOpen;
        }}>
					<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
					${this.#renderBlockInfo()}
					<slot></slot>
					<slot name="tag"></slot>
				</button>
				${this._isOpen === true ? this.#renderInside() : nothing}
			</div>
		`;
    }
    #renderBlockInfo() {
        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
        return html `
			<span id="content">
				<span id="icon">
					<umb-icon .name=${this.icon}></umb-icon>
				</span>
				<div id="info">
					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
				</div>
			</span>
			${when(this.unpublished, () => html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
					></uui-tag>`)}
		`;
    }
    #renderInside() {
        if (this._exposed === false) {
            return html `<uui-button id="exposeButton" draggable="false" @click=${this.#expose}
				><uui-icon name="icon-add"></uui-icon>
				<umb-localize
					key="blockEditor_createThisFor"
					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
			></uui-button>`;
        }
        else {
            return html `<umb-block-workspace-view-edit-content-no-router
				draggable="false"></umb-block-workspace-view-edit-content-no-router>`;
        }
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#host {
				position: relative;
				display: block;
				width: 100%;
				margin-bottom: 1px;

				box-sizing: border-box;
				border-radius: var(--uui-border-radius);
				background-color: var(--uui-color-surface);

				border: 1px solid var(--uui-color-border);
				transition: border-color 80ms;

				min-width: 250px;
			}

			#exposeButton {
				width: 100%;
				min-height: var(--uui-size-16);
			}

			#open-part + * {
				border-top: 1px solid var(--uui-color-border);
			}
			:host([disabled]) #open-part {
				cursor: default;
				transition: border-color 80ms;
			}
			:host(:not([disabled])) #host:has(#open-part:hover) {
				border-color: var(--uui-color-border-emphasis);
			}
			:host(:not([disabled])) #open-part:hover + * {
				border-color: var(--uui-color-border-emphasis);
			}
			:host([disabled]) #host {
				border-color: var(--uui-color-disabled-standalone);
			}

			:host([unpublished]) #open-part #content {
				opacity: 0.6;
			}

			slot[name='tag'] {
				flex-grow: 1;

				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			button {
				font-size: inherit;
				font-family: inherit;
				border: 0;
				padding: 0;
				background-color: transparent;
				text-align: left;
				color: var(--uui-color-text);
			}

			#content {
				align-self: stretch;
				line-height: normal;
				display: flex;
				position: relative;
				align-items: center;
			}

			#open-part {
				color: inherit;
				text-decoration: none;
				cursor: pointer;

				display: flex;
				text-align: left;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				border: none;
				background: none;

				min-height: var(--uui-size-16);
				padding: calc(var(--uui-size-2) + 1px);
			}

			#icon {
				font-size: 1.2em;
				margin-left: var(--uui-size-2);
				margin-right: var(--uui-size-1);
			}

			#info {
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: center;
				height: 100%;
				padding-left: var(--uui-size-2, 6px);
			}

			uui-tag {
				margin-left: 0.5em;
				margin-bottom: -0.3em;
				margin-top: -0.3em;
				vertical-align: text-top;
			}

			:host(:not([disabled])) #open-part:hover #icon {
				color: var(--uui-color-interactive-emphasis);
			}
			:host(:not([disabled])) #open-part:hover #name {
				color: var(--uui-color-interactive-emphasis);
			}

			:host([disabled]) #icon {
				color: var(--uui-color-disabled-contrast);
			}
			:host([disabled]) #name {
				color: var(--uui-color-disabled-contrast);
			}
		`,
    ]; }
};
__decorate([
    property({ type: String, reflect: false })
], UmbInlineListBlockElement.prototype, "label", void 0);
__decorate([
    property({ type: String, reflect: false })
], UmbInlineListBlockElement.prototype, "icon", void 0);
__decorate([
    property({ type: Number, attribute: false })
], UmbInlineListBlockElement.prototype, "index", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbInlineListBlockElement.prototype, "unpublished", void 0);
__decorate([
    property({ attribute: false })
], UmbInlineListBlockElement.prototype, "content", void 0);
__decorate([
    property({ attribute: false })
], UmbInlineListBlockElement.prototype, "settings", void 0);
__decorate([
    state()
], UmbInlineListBlockElement.prototype, "_exposed", void 0);
__decorate([
    state()
], UmbInlineListBlockElement.prototype, "_isOpen", void 0);
__decorate([
    state()
], UmbInlineListBlockElement.prototype, "_ownerContentTypeName", void 0);
__decorate([
    state()
], UmbInlineListBlockElement.prototype, "_variantName", void 0);
UmbInlineListBlockElement = __decorate([
    customElement('umb-inline-list-block')
], UmbInlineListBlockElement);
export { UmbInlineListBlockElement };
export default UmbInlineListBlockElement;
