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_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type-workspace.context-token.js';
import { css, customElement, html, nothing, property, ref } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { umbOpenModal } from '../../../../core/modal/index.js';
import { UMB_MISSING_PROPERTY_EDITOR_UI_ALIAS, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, } from '../../../../core/property-editor/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import { UmbFormControlMixin } from '../../../../core/validation/index.js';
/**
 * @internal
 */
let UmbDataTypeDetailsWorkspacePropertyEditorPickerElement = class UmbDataTypeDetailsWorkspacePropertyEditorPickerElement extends UmbFormControlMixin(UmbLitElement) {
    #workspaceContext;
    #addButton;
    constructor() {
        super();
        this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
            this.#workspaceContext = workspaceContext;
        });
        this.addValidator('customError', () => this.localize.term('missingEditor_dataTypeMissingEditorUiMessage'), () => !this.propertyEditorUiName);
        this.addValidator('customError', () => this.localize.term('missingEditor_dataTypeMissingEditorMessage'), () => this.propertyEditorUiAlias === UMB_MISSING_PROPERTY_EDITOR_UI_ALIAS);
    }
    getFormElement() {
        return undefined;
    }
    #addButtonRefChanged(input) {
        if (this.#addButton) {
            this.removeFormControlElement(this.#addButton);
        }
        this.#addButton = input;
        if (this.#addButton) {
            this.addFormControlElement(this.#addButton);
        }
    }
    async #openPropertyEditorUIPicker() {
        const value = await umbOpenModal(this, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, {
            value: {
                selection: this.propertyEditorUiAlias ? [this.propertyEditorUiAlias] : [],
            },
        }).catch(() => undefined);
        if (value) {
            this.#workspaceContext?.setPropertyEditorUiAlias(value.selection[0]);
        }
    }
    #renderPropertyEditorReference() {
        if (!this.propertyEditorUiAlias || !this.propertyEditorSchemaAlias)
            return nothing;
        let name = this.localize.string(this.propertyEditorUiName);
        let alias = this.propertyEditorUiAlias;
        let error = false;
        if (!this.propertyEditorUiName) {
            name = this.localize.term('missingEditor_dataTypeMissingEditorUi');
            error = true;
        }
        if (this.propertyEditorUiAlias === UMB_MISSING_PROPERTY_EDITOR_UI_ALIAS) {
            name = this.localize.term('missingEditor_dataTypeMissingEditor');
            alias = '';
            error = true;
        }
        return html `
			<umb-ref-property-editor-ui
				name=${name ?? ''}
				alias=${alias}
				property-editor-schema-alias=${this.propertyEditorSchemaAlias}
				standalone
				?error=${error}
				@open=${this.#openPropertyEditorUIPicker}>
				${this.propertyEditorUiIcon
            ? html `<umb-icon name=${this.propertyEditorUiIcon} slot="icon"></umb-icon>`
            : nothing}
				<uui-action-bar slot="actions">
					<uui-button
						label=${this.localize.term('general_change')}
						@click=${this.#openPropertyEditorUIPicker}></uui-button>
				</uui-action-bar>
			</umb-ref-property-editor-ui>
		`;
    }
    #renderChooseButton() {
        return html `
			<uui-button
				id="btn-add"
				label=${this.localize.term('propertyEditorPicker_title')}
				look="placeholder"
				color="default"
				required
				@click=${this.#openPropertyEditorUIPicker}
				${ref(this.#addButtonRefChanged)}></uui-button>
		`;
    }
    render() {
        return html `
			${this.propertyEditorUiAlias && this.propertyEditorSchemaAlias
            ? this.#renderPropertyEditorReference()
            : this.#renderChooseButton()}
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#btn-add {
				display: block;
			}
		`,
    ]; }
};
__decorate([
    property({ type: String })
], UmbDataTypeDetailsWorkspacePropertyEditorPickerElement.prototype, "propertyEditorUiIcon", void 0);
__decorate([
    property({ type: String })
], UmbDataTypeDetailsWorkspacePropertyEditorPickerElement.prototype, "propertyEditorUiName", void 0);
__decorate([
    property({ type: String })
], UmbDataTypeDetailsWorkspacePropertyEditorPickerElement.prototype, "propertyEditorUiAlias", void 0);
__decorate([
    property({ type: String })
], UmbDataTypeDetailsWorkspacePropertyEditorPickerElement.prototype, "propertyEditorSchemaAlias", void 0);
UmbDataTypeDetailsWorkspacePropertyEditorPickerElement = __decorate([
    customElement('umb-data-type-details-workspace-property-editor-picker')
], UmbDataTypeDetailsWorkspacePropertyEditorPickerElement);
export { UmbDataTypeDetailsWorkspacePropertyEditorPickerElement };
export default UmbDataTypeDetailsWorkspacePropertyEditorPickerElement;
