import { html, nothing } from 'lit';
import { live } from 'lit/directives/live.js';
import { ModelingElement } from './ModelingElement.js';
import { cancelEvent } from '@api-client/core/lib/events/Utils.js';
import { renderHelp } from '../../help/render.js';
/**
 * An UI element that renders an editor for a DomainModel
 */
export default class DomainModelEditor extends ModelingElement {
    domainElement;
    willUpdate(cp) {
        if (cp.has('selected') || cp.has('root') || cp.has('namespace')) {
            this.computeDataModel();
        }
        super.willUpdate(cp);
    }
    computeDataModel() {
        const { root, selected, namespace } = this;
        if (!root || !selected) {
            this.domainElement = undefined;
            return;
        }
        this.domainElement = root.findModel(selected, namespace);
    }
    handleValueChange(e) {
        const { domainElement } = this;
        if (!domainElement) {
            return;
        }
        const node = e.target;
        const { name, value } = node;
        if (!['name', 'description'].includes(name)) {
            return;
        }
        if (name === 'name' && !value) {
            return;
        }
        domainElement.info[name] = value;
        this.notifyChange();
    }
    render() {
        const { domainElement } = this;
        if (!domainElement) {
            return nothing;
        }
        return html `${this.renderForm(domainElement)}`;
    }
    renderForm(model) {
        const disabled = !this.canEdit;
        return html `
      <form name="data-model" @submit="${cancelEvent}" data-key="${model.key}" class="modeling-form">
        <div class="editor-section">
          <div class="row input-row">
            <ui-outlined-text-field
              class="input"
              name="name"
              .value="${live(model.info.name || '')}"
              label="Model name"
              required
              ?disabled="${disabled}"
              @change="${this.handleValueChange}"
            ></ui-outlined-text-field>
            ${renderHelp('model', 'name-input')}
          </div>
          <div class="row input-row">
            <ui-outlined-text-field
              class="input"
              name="description"
              .value="${live(model.info.description || '')}"
              label="Description (optional)"
              ?disabled="${disabled}"
              @change="${this.handleValueChange}"
            ></ui-outlined-text-field>
            ${renderHelp('model', 'description-input')}
          </div>
        </div>
      </form>
    `;
    }
}
//# sourceMappingURL=DomainModelEditor.js.map