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 { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
import { css, customElement, html, property, state } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import '../block-scale-handler/block-scale-handler.element.js';
/**
 * @element umb-block-area-config-entry
 */
let UmbBlockGridAreaConfigEntryElement = class UmbBlockGridAreaConfigEntryElement extends UmbLitElement {
    //
    get key() {
        return this._key;
    }
    set key(key) {
        if (!key)
            return;
        this._key = key;
        this.setAttribute('data-area-key', key);
        this.#context.setAreaKey(key);
    }
    #context;
    constructor() {
        super();
        this.#context = new UmbBlockGridAreaConfigEntryContext(this);
        this._alias = '';
        this.observe(this.#context.alias, (alias) => {
            this._alias = alias ?? '';
        });
    }
    connectedCallback() {
        super.connectedCallback();
        // element styling:
        this.observe(this.#context.columnSpan, (columnSpan) => {
            this._columnSpan = columnSpan;
            this.setAttribute('data-col-span', columnSpan ? columnSpan.toString() : '');
            this.style.setProperty('--umb-block-grid--grid-column', columnSpan ? columnSpan.toString() : '');
            this.style.setProperty('--umb-block-grid--area-column-span', columnSpan ? columnSpan.toString() : '');
        }, 'columnSpan');
        this.observe(this.#context.rowSpan, (rowSpan) => {
            this._rowSpan = rowSpan;
            this.setAttribute('data-row-span', rowSpan ? rowSpan.toString() : '');
            this.style.setProperty('--umb-block-grid--area-row-span', rowSpan ? rowSpan.toString() : '');
        }, 'rowSpan');
    }
    #renderBlock() {
        return this._key
            ? html `
					<span class="alias">${this._alias}</span>
					<uui-action-bar>
						<uui-button label="edit" compact href=${this.workspacePath + 'edit/' + this._key}>
							<uui-icon name="icon-edit"></uui-icon>
						</uui-button>
						<uui-button label="delete" compact @click=${() => this.#context.requestDelete()}>
							<uui-icon name="icon-remove"></uui-icon>
						</uui-button>
					</uui-action-bar>
					<umb-block-scale-handler @mousedown=${(e) => this.#context.scaleManager.onScaleMouseDown(e)}>
						${this._columnSpan}x${this._rowSpan}
					</umb-block-scale-handler>
				`
            : '';
    }
    render() {
        return this.#renderBlock();
    }
    // TODO: Update UUI, as it is missing proper colors to be used for this case:
    static { this.styles = [
        css `
			:host {
				position: relative;
				display: block;
				box-sizing: border-box;
				background-color: var(--uui-color-disabled);
				border: 1px solid var(--uui-color-border);
				border-radius: var(--uui-border-radius);
				transition: background-color 120ms;
			}

			:host(:hover) {
				background-color: var(--uui-color-disabled-standalone);
			}

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

			uui-action-bar {
				position: absolute;
				top: var(--uui-size-2);
				right: var(--uui-size-2);
			}

			.alias {
				padding: var(--uui-size-space-4);
			}
		`,
    ]; }
};
__decorate([
    property({ attribute: false })
], UmbBlockGridAreaConfigEntryElement.prototype, "key", null);
__decorate([
    property()
], UmbBlockGridAreaConfigEntryElement.prototype, "workspacePath", void 0);
__decorate([
    state()
], UmbBlockGridAreaConfigEntryElement.prototype, "_columnSpan", void 0);
__decorate([
    state()
], UmbBlockGridAreaConfigEntryElement.prototype, "_rowSpan", void 0);
__decorate([
    state()
], UmbBlockGridAreaConfigEntryElement.prototype, "_alias", void 0);
UmbBlockGridAreaConfigEntryElement = __decorate([
    customElement('umb-block-area-config-entry')
], UmbBlockGridAreaConfigEntryElement);
export { UmbBlockGridAreaConfigEntryElement };
export default UmbBlockGridAreaConfigEntryElement;
