import { __decorate } from "tslib";
import { html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { live } from 'lit/directives/live.js';
import { Server } from '@api-client/core/build/browser.js';
import elementStyles from './ServerEditor.styles.js';
import ApiElement from '../ApiElement.js';
import '../../define/ui/ui-text-field.js';
import '../../define/ui/ui-icon.js';
import '../../define/ui/ui-icon-button.js';
export const DefaultProtocols = ['http:', 'https:'];
/**
 * An element to render a view for a server definition with a form to edit it.
 *
 * @fires change - When a value change.
 * @fires delete - When the user requested server definition delete.
 */
export default class ServerEditor extends ApiElement {
    constructor() {
        super(...arguments);
        /**
         * The server logic used with computations.
         */
        this.serverInternal = new Server();
    }
    static get styles() {
        return [elementStyles];
    }
    willUpdate(cp) {
        if (cp.has('uri') || cp.has('protocol') || cp.has('basePath') || cp.has('description')) {
            this.setupValue();
        }
        super.willUpdate(cp);
    }
    /**
     * Updates the value of the generated base URI.
     * This can be called from the outside of the component to force computation.
     * This is helpful when deep-updating variables.
     */
    generateValue() {
        this.setupValue();
        this.requestUpdate();
    }
    setupValue() {
        const { serverInternal } = this;
        this.updateServer();
        this.valueInternal = serverInternal.readUri(this.variables);
    }
    updateServer() {
        const { serverInternal, uri = '', protocol, basePath, description } = this;
        serverInternal.uri = uri;
        serverInternal.protocol = protocol;
        serverInternal.basePath = basePath;
        serverInternal.description = description;
    }
    /**
     * Creates a schema for the current values.
     */
    getSchema() {
        this.updateServer();
        return this.serverInternal.toJSON();
    }
    /**
     * Updates name/value of a parameter on a specific index.
     */
    updateProperty(field, value) {
        this[field] = value;
        this.notifyChange();
    }
    handleUriChange(e) {
        const input = e.target;
        this.updateProperty('uri', input.value);
        input.checkValidity();
    }
    handleBasePathChange(e) {
        const input = e.target;
        this.updateProperty('basePath', input.value);
        input.checkValidity();
    }
    handleProtocolChange(e) {
        const input = e.target;
        this.updateProperty('protocol', input.value);
        input.checkValidity();
    }
    handleDelete() {
        this.dispatchEvent(new Event('delete'));
    }
    render() {
        return html `
    ${this.renderHeader()}
    <form>
      ${this.renderUriInput()}
      ${this.renderProtocolInput()}
      ${this.renderBasePathInput()}
    </form>
    ${this.renderValue()}
    `;
    }
    renderHeader() {
        return html `
    <div class="header">
      <div class="section-title">Server</div>
      ${this.renderDeleteButton()}
    </div>
    `;
    }
    renderUriInput() {
        return html `
    <div class="form-item">
      <ui-text-field
        required
        name="uri" 
        .value="${live(this.uri || '')}"
        label="URI"
        @change="${this.handleUriChange}"
      ></ui-text-field>
    </div>
    `;
    }
    renderProtocolInput() {
        return html `
    <div class="form-item">
      <ui-text-field
        name="protocol"
        .value="${live(this.protocol || '')}"
        .list="${DefaultProtocols}"
        label="Protocol (optional)"
        @change="${this.handleProtocolChange}"
      ></ui-text-field>
    </div>`;
    }
    renderBasePathInput() {
        return html `
    <div class="form-item">
      <ui-text-field
        name="basePath"
        .value="${live(this.basePath || '')}"
        label="Base path (optional)"
        @change="${this.handleBasePathChange}"
      ></ui-text-field>
    </div>`;
    }
    renderValue() {
        const { valueInternal } = this;
        if (!valueInternal) {
            return '';
        }
        return html `
    <div class="uri-label">Server URI</div>
    <div class="value-preview">
      ${valueInternal}
    </div>
    `;
    }
    renderDeleteButton() {
        return html `
    <ui-icon-button aria-label="Remove this server" @click="${this.handleDelete}">
      <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
    </ui-icon-button>
    `;
    }
}
__decorate([
    property({ type: String })
], ServerEditor.prototype, "uri", void 0);
__decorate([
    property({ type: String })
], ServerEditor.prototype, "protocol", void 0);
__decorate([
    property({ type: String })
], ServerEditor.prototype, "basePath", void 0);
__decorate([
    property({ type: String })
], ServerEditor.prototype, "description", void 0);
__decorate([
    property({ type: Array })
], ServerEditor.prototype, "variables", void 0);
__decorate([
    query('#protocolInput', false)
], ServerEditor.prototype, "protocolInput", void 0);
//# sourceMappingURL=ServerEditor.js.map