import { __decorate } from "tslib";
import { EventUtils } from "@api-client/core/build/browser.js";
import { css, html } from "lit";
import { property, state } from "lit/decorators.js";
import { live } from "lit/directives/live.js";
import ApiElement from "../ApiElement.js";
import EditorCommon from './CommonStyles.js';
import theme from '../theme.js';
import typography from "../../styles/m3/typography.module.js";
import '../../define/ui/ui-text-field.js';
import '../../define/ui/ui-checkbox.js';
import '../../define/ui/ui-divider.js';
import '../../define/ui/ui-icon-button.js';
import '../../define/ui/ui-icon.js';
export default class AssociationFormElement extends ApiElement {
    static get styles() {
        return [
            theme,
            EditorCommon,
            typography,
            css `
      :host {
        display: block;
      }
      `
        ];
    }
    willUpdate(cp) {
        if (cp.has('key')) {
            this._computeAssociation();
        }
    }
    /**
     * Computes the view value for the association.
     * This should be called before the update is complete so this won't trigger another update.
     */
    _computeAssociation() {
        const { root, key } = this;
        if (!root || !key) {
            this._association = undefined;
            return;
        }
        this._association = root.definitions.associations.find(i => i.key === key);
    }
    _infoChangeHandler(e) {
        const { _association } = this;
        if (!_association) {
            return;
        }
        const node = e.target;
        const { name, value } = node;
        if (!['name', 'description', 'displayName'].includes(name)) {
            return;
        }
        if (name === 'name' && !value) {
            return;
        }
        _association.info[name] = value;
        this.notifyChange();
        this.requestUpdate();
    }
    _checkedHandler(e) {
        const { _association } = this;
        if (!_association) {
            return;
        }
        const input = e.target;
        const name = input.name;
        const { checked } = input;
        if (_association[name] === checked) {
            return;
        }
        _association[name] = checked;
        this.notifyChange();
        this.requestUpdate();
    }
    render() {
        const { _association: item } = this;
        if (!item) {
            return html ``;
        }
        const { info, multiple = false, required = false } = item;
        return html `
    <form name="data-association" @submit="${EventUtils.cancelEvent}" data-key="${item.key}">
      <ui-text-field class="input" name="name" .value="${live(info.name || '')}" label="Association name" required @change="${this._infoChangeHandler}"></ui-text-field>
      <ui-text-field class="input" name="displayName" .value="${live(info.displayName || '')}" label="Display name (optional)" @change="${this._infoChangeHandler}"></ui-text-field>
      <ui-text-field class="input" name="description" .value="${live(info.description || '')}" label="Association description (optional)" @change="${this._infoChangeHandler}"></ui-text-field>

      <div class="checkbox-group">
        <label class="label-large">
          <ui-checkbox name="required" .checked="${required}" title="Whether the association is required in the schema" @change="${this._checkedHandler}"></ui-checkbox>
          Required
        </label>
        <label class="label-large">
          <ui-checkbox name="multiple" .checked="${multiple}" title="When set it declares this association as an array. Multiple instances of the value are permitted." @change="${this._checkedHandler}"></ui-checkbox>
          Multiple
        </label>
      </div>
    </form>
    `;
    }
}
__decorate([
    property({ type: String, reflect: true })
], AssociationFormElement.prototype, "key", void 0);
__decorate([
    property({ type: Object })
], AssociationFormElement.prototype, "root", void 0);
__decorate([
    state()
], AssociationFormElement.prototype, "_association", void 0);
//# sourceMappingURL=AssociationFormElement.js.map