import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { EventTypes } from '../../events/amf/EventTypes.js';
import ApiElement from '../ApiElement.js';
import '../../define/amf/api-request-editor.js';
import '../../define/http/http-request-log.js';
export default class ApiRequest extends ApiElement {
    /**
     * The domain id (AMF's id) of an API operation.
     */
    get domainId() {
        return this.domainIdValue;
    }
    set domainId(value) {
        const old = this.domainIdValue;
        /* istanbul ignore if */
        if (old === value) {
            return;
        }
        this.domainIdValue = value;
        this.requestUpdate('domainId', old);
        this.domainIdChanged(value);
    }
    constructor() {
        super();
        this.navigationHandler = this.navigationHandler.bind(this);
        this.handleNavigationEvents = false;
        this.allowHideOptional = false;
        this.allowCustom = false;
        this.noServerSelector = false;
        this.allowCustomBaseUri = false;
    }
    connectedCallback() {
        super.connectedCallback();
        const node = this.eventsTarget;
        node.addEventListener(EventTypes.Navigation.apiNavigate, this.navigationHandler);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        const node = this.eventsTarget;
        node.removeEventListener(EventTypes.Navigation.apiNavigate, this.navigationHandler);
    }
    /**
     * Serializes the state of the request editor into the `ApiConsoleRequest` object.
     *
     * Note this is the same object as the one passed to the detail of the api request event.
     */
    async serialize() {
        const { shadowRoot } = this;
        if (!shadowRoot) {
            throw new Error(`The component is not yet initialized.`);
        }
        const editor = shadowRoot.querySelector('api-request-editor');
        if (!editor) {
            throw new Error(`The request editor has been manually removed from the DOM.`);
        }
        return editor.serialize();
    }
    /**
     * Clears response panel when the `domainId` change.
     */
    domainIdChanged(id) {
        if (!id) {
            return;
        }
        this.clearResponse();
    }
    /**
     * Clears response panel.
     */
    clearResponse() {
        if (this.response) {
            this.response = undefined;
        }
    }
    /**
     * Handles navigation events and computes available servers.
     *
     * When `handleNavigationEvents` is set then it also manages the selection.
     */
    navigationHandler(e) {
        if (this.handleNavigationEvents) {
            const { domainId, domainType } = e.detail;
            this.domainId = domainType === 'operation' ? domainId : undefined;
        }
    }
    /**
     * Retargets the change event from the editor.
     */
    changeHandler() {
        this.notifyChange();
    }
    handleResponse(e) {
        this.response = e.detail;
    }
    render() {
        return html `${this.requestTemplate()}${this.responseTemplate()}`;
    }
    /**
     * @returns A template for the request panel
     */
    requestTemplate() {
        const { redirectUri, domainId, urlEditor, urlLabel, baseUri, eventsTarget, allowHideOptional, allowCustom, serverValue, serverType, noServerSelector, allowCustomBaseUri, credentialsSource, } = this;
        return html `
    <api-request-editor
      .redirectUri="${redirectUri}"
      .domainId="${domainId}"
      ?urlEditor="${urlEditor}"
      ?urlLabel="${urlLabel}"
      .baseUri="${baseUri}"
      .eventsTarget="${eventsTarget}"
      ?allowHideOptional="${allowHideOptional}"
      ?allowCustom="${allowCustom}"
      .serverValue="${serverValue}"
      .serverType="${serverType}"
      ?noServerSelector="${noServerSelector}"
      ?allowCustomBaseUri="${allowCustomBaseUri}"
      .credentialsSource="${credentialsSource}"
      @change="${this.changeHandler}"
      @response="${this.handleResponse}"
    >
      <slot name="custom-base-uri" slot="custom-base-uri"></slot>
    </api-request-editor>`;
    }
    /**
     * @returns A template for the response view
     */
    responseTemplate() {
        const { response } = this;
        if (!response) {
            return nothing;
        }
        return html `<http-request-log 
      .httpLog="${response}"
    ></http-request-log>`;
    }
}
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "handleNavigationEvents", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "urlEditor", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "urlLabel", void 0);
__decorate([
    property({ type: String })
], ApiRequest.prototype, "baseUri", void 0);
__decorate([
    property({ type: String })
], ApiRequest.prototype, "redirectUri", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "allowHideOptional", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "allowCustom", void 0);
__decorate([
    property({ type: String })
], ApiRequest.prototype, "serverValue", void 0);
__decorate([
    property({ type: String })
], ApiRequest.prototype, "serverType", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "noServerSelector", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ApiRequest.prototype, "allowCustomBaseUri", void 0);
__decorate([
    property({ type: Array })
], ApiRequest.prototype, "credentialsSource", void 0);
__decorate([
    property({ type: String })
], ApiRequest.prototype, "domainId", null);
__decorate([
    state()
], ApiRequest.prototype, "response", void 0);
//# sourceMappingURL=ApiRequest.element.js.map