import { __esDecorate, __runInitializers } 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/models/Server.js';
import elementStyles from './ServerEditor.styles.js';
import ApiElement from '../ApiElement.js';
import '../../md/text-field/ui-filled-text-field.js';
import '../../md/icons/ui-icon.js';
import '../../md/icon-button/ui-icon-button.js';
export const DefaultProtocols = ['http:', 'https:'];
let ServerEditor = (() => {
    let _classSuper = ApiElement;
    let _uri_decorators;
    let _uri_initializers = [];
    let _uri_extraInitializers = [];
    let _protocol_decorators;
    let _protocol_initializers = [];
    let _protocol_extraInitializers = [];
    let _basePath_decorators;
    let _basePath_initializers = [];
    let _basePath_extraInitializers = [];
    let _description_decorators;
    let _description_initializers = [];
    let _description_extraInitializers = [];
    let _variables_decorators;
    let _variables_initializers = [];
    let _variables_extraInitializers = [];
    let _protocolInput_decorators;
    let _protocolInput_initializers = [];
    let _protocolInput_extraInitializers = [];
    return class ServerEditor extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _uri_decorators = [property({ type: String })];
            _protocol_decorators = [property({ type: String })];
            _basePath_decorators = [property({ type: String })];
            _description_decorators = [property({ type: String })];
            _variables_decorators = [property({ type: Array })];
            _protocolInput_decorators = [query('#protocolInput', false)];
            __esDecorate(this, null, _uri_decorators, { kind: "accessor", name: "uri", static: false, private: false, access: { has: obj => "uri" in obj, get: obj => obj.uri, set: (obj, value) => { obj.uri = value; } }, metadata: _metadata }, _uri_initializers, _uri_extraInitializers);
            __esDecorate(this, null, _protocol_decorators, { kind: "accessor", name: "protocol", static: false, private: false, access: { has: obj => "protocol" in obj, get: obj => obj.protocol, set: (obj, value) => { obj.protocol = value; } }, metadata: _metadata }, _protocol_initializers, _protocol_extraInitializers);
            __esDecorate(this, null, _basePath_decorators, { kind: "accessor", name: "basePath", static: false, private: false, access: { has: obj => "basePath" in obj, get: obj => obj.basePath, set: (obj, value) => { obj.basePath = value; } }, metadata: _metadata }, _basePath_initializers, _basePath_extraInitializers);
            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
            __esDecorate(this, null, _variables_decorators, { kind: "accessor", name: "variables", static: false, private: false, access: { has: obj => "variables" in obj, get: obj => obj.variables, set: (obj, value) => { obj.variables = value; } }, metadata: _metadata }, _variables_initializers, _variables_extraInitializers);
            __esDecorate(this, null, _protocolInput_decorators, { kind: "accessor", name: "protocolInput", static: false, private: false, access: { has: obj => "protocolInput" in obj, get: obj => obj.protocolInput, set: (obj, value) => { obj.protocolInput = value; } }, metadata: _metadata }, _protocolInput_initializers, _protocolInput_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static get styles() {
            return [elementStyles];
        }
        #uri_accessor_storage = __runInitializers(this, _uri_initializers, void 0);
        /**
         * The base URI of the server.
         *
         * Note, the URL can contain URI templates (e.g. `http://{host}.api.com/v1`)
         * In this case the variable is replaced with the system or project variables.
         *
         * For simplicity, the `uri` can be the full base URI with protocol, host, and the `basePath`
         *
         * @attribute
         */
        get uri() { return this.#uri_accessor_storage; }
        set uri(value) { this.#uri_accessor_storage = value; }
        #protocol_accessor_storage = (__runInitializers(this, _uri_extraInitializers), __runInitializers(this, _protocol_initializers, void 0));
        /**
         * Usually included in the `uri`. When the `uri` is missing a protocol
         * this is then used.
         *
         * @attribute
         */
        get protocol() { return this.#protocol_accessor_storage; }
        set protocol(value) { this.#protocol_accessor_storage = value; }
        #basePath_accessor_storage = (__runInitializers(this, _protocol_extraInitializers), __runInitializers(this, _basePath_initializers, void 0));
        /**
         * The base path for the server. It starts with the `/`.
         * When set, it is appended to the `uri` value.
         *
         * @attribute
         */
        get basePath() { return this.#basePath_accessor_storage; }
        set basePath(value) { this.#basePath_accessor_storage = value; }
        #description_accessor_storage = (__runInitializers(this, _basePath_extraInitializers), __runInitializers(this, _description_initializers, void 0));
        /**
         * Optional description of the server.
         *
         * @attribute
         */
        get description() { return this.#description_accessor_storage; }
        set description(value) { this.#description_accessor_storage = value; }
        #variables_accessor_storage = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _variables_initializers, void 0));
        /**
         * Optional list of variables to set on the environment.
         * When set it evaluates the final URI value against these properties.
         */
        get variables() { return this.#variables_accessor_storage; }
        set variables(value) { this.#variables_accessor_storage = value; }
        /**
         * The computed value of the full URI from the values.
         */
        valueInternal = __runInitializers(this, _variables_extraInitializers);
        /**
         * The server logic used with computations.
         */
        serverInternal = new Server();
        #protocolInput_accessor_storage = __runInitializers(this, _protocolInput_initializers, null);
        get protocolInput() { return this.#protocolInput_accessor_storage; }
        set protocolInput(value) { this.#protocolInput_accessor_storage = value; }
        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-filled-text-field
          required
          name="uri"
          .value="${live(this.uri || '')}"
          label="URI"
          @change="${this.handleUriChange}"
        ></ui-filled-text-field>
      </div>
    `;
        }
        renderProtocolInput() {
            return html ` <div class="form-item">
      <ui-filled-text-field
        name="protocol"
        .value="${live(this.protocol || '')}"
        .list="${DefaultProtocols}"
        label="Protocol (optional)"
        @change="${this.handleProtocolChange}"
      ></ui-filled-text-field>
    </div>`;
        }
        renderBasePathInput() {
            return html ` <div class="form-item">
      <ui-filled-text-field
        name="basePath"
        .value="${live(this.basePath || '')}"
        label="Base path (optional)"
        @change="${this.handleBasePathChange}"
      ></ui-filled-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>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _protocolInput_extraInitializers);
        }
    };
})();
/**
 * 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 ServerEditor;
//# sourceMappingURL=ServerEditor.js.map