import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property, query } from 'lit/decorators.js';
import { PayloadSerializer, } from '@api-client/core/lib/transformers/PayloadSerializer.js';
import { ifProperty } from '../../directives/if-property.js';
import { Events } from '../../events/Events.js';
import ApiElement from '../ApiElement.js';
import '../../md/icons/ui-icon.js';
import '../../define/http/http-body-urlencoded-editor.js';
import '../../define/http/http-body-multipart-editor.js';
import '../../define/http/http-body-text-editor.js';
import '../../md/button/ui-button.js';
import '../../md/dropdown-list/ui-dropdown-list.js';
import '../../md/list/ui-list.js';
import '../../md/list/ui-list-item.js';
import '../../md/divider/ui-divider.js';
import '../../md/checkbox/ui-checkbox.js';
export const editorTypes = Object.freeze([
    {
        id: 'raw',
        label: 'Text editor',
        title: 'Opens a source editor with syntax highlighting',
    },
    {
        id: 'urlEncode',
        label: 'Form URL encoded',
        title: 'Opens an editor specialized with URL encoded data types',
    },
    {
        id: 'multipart',
        label: 'Multipart form data',
        title: 'Opens an editor specialized with multipart data',
    },
    {
        id: 'file',
        label: 'A file',
        title: 'Allows to choose any binary data',
    },
]);
const monacoContentTypes = {
    'application/json': 'JSON',
    'application/xml': 'XML',
    'text/html': 'HTML',
    'text/css': 'CSS',
    '': 'Inherited from headers',
};
let BodyEditor = (() => {
    let _classSuper = ApiElement;
    let _instanceExtraInitializers = [];
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _set_value_decorators;
    let _set_model_decorators;
    let _readOnly_decorators;
    let _readOnly_initializers = [];
    let _readOnly_extraInitializers = [];
    let _disabled_decorators;
    let _disabled_initializers = [];
    let _disabled_extraInitializers = [];
    let _autoEncode_decorators;
    let _autoEncode_initializers = [];
    let _autoEncode_extraInitializers = [];
    let _contentType_decorators;
    let _contentType_initializers = [];
    let _contentType_extraInitializers = [];
    let _urlEncodedEditor_decorators;
    let _urlEncodedEditor_initializers = [];
    let _urlEncodedEditor_extraInitializers = [];
    let _multipartEditor_decorators;
    let _multipartEditor_initializers = [];
    let _multipartEditor_extraInitializers = [];
    return class BodyEditor extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _selected_decorators = [property({ type: String })];
            _set_value_decorators = [property({ attribute: false })];
            _set_model_decorators = [property({ type: Array })];
            _readOnly_decorators = [property({ type: Boolean, reflect: true })];
            _disabled_decorators = [property({ type: Boolean, reflect: true })];
            _autoEncode_decorators = [property({ type: Boolean, reflect: true })];
            _contentType_decorators = [property({ type: String, reflect: true })];
            _urlEncodedEditor_decorators = [query('http-body-urlencoded-editor')];
            _multipartEditor_decorators = [query('http-body-multipart-editor')];
            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
            __esDecorate(this, null, _set_value_decorators, { kind: "setter", name: "value", static: false, private: false, access: { has: obj => "value" in obj, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _set_model_decorators, { kind: "setter", name: "model", static: false, private: false, access: { has: obj => "model" in obj, set: (obj, value) => { obj.model = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
            __esDecorate(this, null, _autoEncode_decorators, { kind: "accessor", name: "autoEncode", static: false, private: false, access: { has: obj => "autoEncode" in obj, get: obj => obj.autoEncode, set: (obj, value) => { obj.autoEncode = value; } }, metadata: _metadata }, _autoEncode_initializers, _autoEncode_extraInitializers);
            __esDecorate(this, null, _contentType_decorators, { kind: "accessor", name: "contentType", static: false, private: false, access: { has: obj => "contentType" in obj, get: obj => obj.contentType, set: (obj, value) => { obj.contentType = value; } }, metadata: _metadata }, _contentType_initializers, _contentType_extraInitializers);
            __esDecorate(this, null, _urlEncodedEditor_decorators, { kind: "accessor", name: "urlEncodedEditor", static: false, private: false, access: { has: obj => "urlEncodedEditor" in obj, get: obj => obj.urlEncodedEditor, set: (obj, value) => { obj.urlEncodedEditor = value; } }, metadata: _metadata }, _urlEncodedEditor_initializers, _urlEncodedEditor_extraInitializers);
            __esDecorate(this, null, _multipartEditor_decorators, { kind: "accessor", name: "multipartEditor", static: false, private: false, access: { has: obj => "multipartEditor" in obj, get: obj => obj.multipartEditor, set: (obj, value) => { obj.multipartEditor = value; } }, metadata: _metadata }, _multipartEditor_initializers, _multipartEditor_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, 'raw'));
        /**
         * The currently rendered editor.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        valueInternal = (__runInitializers(this, _selected_extraInitializers), '');
        /**
         * The HTTP body.
         *
         * Depending of current editor selection the type can vary.
         */
        get value() {
            return this.valueInternal;
        }
        set value(value) {
            const old = this.valueInternal;
            if (old === value) {
                return;
            }
            // this is to be able to set a private filed value from
            // within the element
            this.valueInternal = value;
            this.requestUpdate();
        }
        modelInternal;
        /**
         * Previously generated by this editor metadata model.
         * Used internally to set the UI.
         */
        get model() {
            return this.modelInternal;
        }
        set model(value) {
            const old = this.modelInternal;
            if (old === value) {
                return;
            }
            // this is to be able to set a private filed value from
            // within the element
            this.modelInternal = value;
            this.requestUpdate();
            this.modelChanged();
        }
        #readOnly_accessor_storage = __runInitializers(this, _readOnly_initializers, false
        /**
         * When set all controls are disabled in the form
         * @attribute
         */
        );
        /**
         * When set the editor is in read only mode.
         * @attribute
         */
        get readOnly() { return this.#readOnly_accessor_storage; }
        set readOnly(value) { this.#readOnly_accessor_storage = value; }
        #disabled_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _disabled_initializers, false
        /**
         * When set it automatically encodes and decodes values.
         * @attribute
         */
        ));
        /**
         * When set all controls are disabled in the form
         * @attribute
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #autoEncode_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _autoEncode_initializers, false
        /**
         * @returns True when the current value is a file (or blob).
         */
        ));
        /**
         * When set it automatically encodes and decodes values.
         * @attribute
         */
        get autoEncode() { return this.#autoEncode_accessor_storage; }
        set autoEncode(value) { this.#autoEncode_accessor_storage = value; }
        /**
         * @returns True when the current value is a file (or blob).
         */
        get hasFile() {
            const { value } = this;
            return value instanceof Blob;
        }
        #contentType_accessor_storage = (__runInitializers(this, _autoEncode_extraInitializers), __runInitializers(this, _contentType_initializers, void 0));
        /**
         * The current request content type. It is passed to the `raw` editor
         * to detect current language.
         * @attribute
         */
        get contentType() { return this.#contentType_accessor_storage; }
        set contentType(value) { this.#contentType_accessor_storage = value; }
        invalidMimeMessage = __runInitializers(this, _contentType_extraInitializers);
        invalidMimeValue;
        mimeValue;
        #urlEncodedEditor_accessor_storage = __runInitializers(this, _urlEncodedEditor_initializers, null);
        get urlEncodedEditor() { return this.#urlEncodedEditor_accessor_storage; }
        set urlEncodedEditor(value) { this.#urlEncodedEditor_accessor_storage = value; }
        #multipartEditor_accessor_storage = (__runInitializers(this, _urlEncodedEditor_extraInitializers), __runInitializers(this, _multipartEditor_initializers, null));
        get multipartEditor() { return this.#multipartEditor_accessor_storage; }
        set multipartEditor(value) { this.#multipartEditor_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _multipartEditor_extraInitializers);
            this.addEventListener('drop', this.handlerDrop.bind(this));
            this.addEventListener('dragover', this.handleDragOver.bind(this));
        }
        update(cp) {
            if (cp.has('contentType') || cp.has('selected')) {
                this.analyzeContentType();
            }
            super.update(cp);
        }
        /**
         * This must be called only when the `model` property change from the
         * outside. It restores values depending on the selected editor.
         */
        modelChanged() {
            const { selected, model } = this;
            if (!model) {
                return;
            }
            if (selected === 'file') {
                this.restoreFileModel();
            }
            const info = this.readMetaModel('urlEncode');
            if (Array.isArray(info) && info[0]) {
                if (typeof info[0].autoEncode === 'boolean') {
                    this.autoEncode = info[0].autoEncode;
                }
            }
        }
        /**
         * Restores file value from the model, if exists
         */
        restoreFileModel() {
            const fileModel = this.readMetaModel('file');
            if (!Array.isArray(fileModel) || !fileModel.length) {
                this.valueInternal = '';
                return;
            }
            const [item] = fileModel;
            if (!item || !item.data) {
                this.valueInternal = '';
                return;
            }
            const file = PayloadSerializer.deserializeFile(item);
            this.valueInternal = file;
        }
        handleTypeChange(e) {
            const target = e.detail.item;
            if (!target) {
                return;
            }
            const selected = target.dataset.type;
            this.changeEditor(selected);
        }
        /**
         * A handler for the editor selection. It activates an editor, if necessary.
         */
        async changeEditor(id) {
            if (this.selected === id) {
                return;
            }
            this.selected = id;
            this.analyzeContentType();
            if (id === 'raw') {
                const model = this.readMetaModel('raw');
                let value = '';
                if (Array.isArray(model) && model.length) {
                    value = model[0].value;
                }
                this.value = value;
                this.notifyChange();
            }
            this.requestUpdate();
            await this.updateComplete;
            // this.notifyResize();
            if (id === 'file') {
                this.restoreFileModel();
                this.notifyChange();
            }
            else if (id === 'urlEncode') {
                const editor = this.shadowRoot.querySelector('http-body-urlencoded-editor');
                if (!editor) {
                    throw new Error(`Invalid state. The <http-body-urlencoded-editor> element was removed from the DOM.`);
                }
                this.value = editor.value;
                this.notifyChange();
            }
            else if (id === 'multipart') {
                const editor = this.shadowRoot.querySelector('http-body-multipart-editor');
                if (!editor) {
                    throw new Error(`Invalid state. The <http-body-multipart-editor> element was removed from the DOM.`);
                }
                this.value = editor.value;
                this.notifyChange();
            }
            this.dispatchEvent(new Event('select'));
        }
        /**
         * A handler for the file pick button click.
         * Activates the file input.
         */
        handlePickFile() {
            const input = this.shadowRoot.querySelector('.binary-hidden');
            input.click();
        }
        /**
         * A handler for the file file selection in the file input.
         * Sets the value to the file.
         */
        async handleFileChange(e) {
            const input = e.target;
            const { files } = input;
            if (!files) {
                return;
            }
            const file = files[0];
            if (!file) {
                return;
            }
            this.valueInternal = file;
            const payload = await PayloadSerializer.stringifyFile(file);
            const model = [payload];
            this.setMetaModel('file', model);
            this.notifyChange();
            this.requestUpdate();
        }
        /**
         * Clears the current value
         */
        handleClearFile() {
            this.value = '';
            this.setMetaModel('file', []);
            this.notifyChange();
        }
        /**
         * Reads editor view model
         *
         * @param editor The editor id
         * @returns The view model
         */
        readMetaModel(editor) {
            const meta = this.model;
            if (!meta || !Array.isArray(meta)) {
                return undefined;
            }
            const item = meta.find((model) => model.type === editor);
            if (!item) {
                return undefined;
            }
            if (Array.isArray(item.viewModel)) {
                return item.viewModel;
            }
            return undefined;
        }
        /**
         * Sets editor view model on the local model
         * @param editor The editor id
         * @param model The view model
         */
        setMetaModel(editor, model) {
            if (!Array.isArray(this.modelInternal)) {
                this.modelInternal = [];
            }
            const meta = this.model;
            const index = meta.findIndex((item) => item.type === editor);
            if (index === -1) {
                meta.push({ type: editor, viewModel: model });
            }
            else {
                meta[index].viewModel = model;
            }
        }
        /**
         * A handler for the change event dispatched by the
         * `urlEncode` editor.
         * Updated the local value, model, and notifies the change.
         */
        handleUrlEncodeChange(e) {
            const editor = e.target;
            this.updateUrlEncodedValue(editor);
        }
        updateUrlEncodedValue(editor) {
            const { value, model } = editor;
            this.valueInternal = value;
            const info = {
                model,
                autoEncode: this.autoEncode,
            };
            this.setMetaModel('urlEncode', [info]);
            this.notifyChange();
            // do not request update here.
        }
        /**
         * A handler for the change event dispatched by the `raw` editor.
         * Updated the local value, model, and notifies the change.
         */
        handleRawChange(e) {
            const editor = e.target;
            const { value } = editor;
            this.valueInternal = value;
            const model = [{ value: value }];
            this.setMetaModel('raw', model);
            this.notifyChange();
        }
        /**
         * A handler for the change event dispatched by the
         * `multipart` editor.
         * Updated the local value, model, and notifies the change.
         */
        handleMultipartChange(e) {
            const editor = e.target;
            const { value, model } = editor;
            this.valueInternal = value;
            this.setMetaModel('multipart', model);
            this.notifyChange();
        }
        /**
         * Checks whether the current content type header value matches the selected editor.
         * If not it renders a warning message.
         */
        analyzeContentType() {
            const mime = this.contentType;
            if (!mime || typeof mime !== 'string') {
                this.invalidMimeValue = false;
                this.mimeValue = undefined;
                return;
            }
            let ct = mime;
            const semicolon = ct.indexOf(';');
            if (semicolon !== -1) {
                ct = ct.substring(0, semicolon);
            }
            this.mimeValue = ct;
            if (!ct) {
                this.invalidMimeValue = false;
                return;
            }
            const { selected } = this;
            if (selected === 'multipart') {
                if (ct !== 'multipart/form-data') {
                    this.invalidMimeValue = true;
                    this.invalidMimeMessage = 1;
                }
                else {
                    this.invalidMimeValue = false;
                }
            }
            else if (selected === 'urlEncode') {
                if (ct !== 'application/x-www-form-urlencoded') {
                    this.invalidMimeValue = true;
                    this.invalidMimeMessage = 2;
                }
                else {
                    this.invalidMimeValue = false;
                }
            }
            else {
                this.invalidMimeValue = false;
            }
        }
        /**
         * Automatically fixes content type problem.
         */
        autoFixMime() {
            const { selected } = this;
            let updated = '';
            if (selected === 'urlEncode') {
                updated = 'application/x-www-form-urlencoded';
            }
            else if (selected === 'multipart') {
                updated = 'multipart/form-data';
            }
            Events.Http.Request.State.contentTypeChange(updated, this);
        }
        /**
         * A handler for the mime type selection.
         */
        handleMimeTypeSelect(e) {
            const target = e.detail.item;
            if (!target) {
                return;
            }
            const { type = '' } = target.dataset;
            if (this.mimeValue === type) {
                return;
            }
            this.contentType = type;
            Events.Http.Request.State.contentTypeChange(type, this);
        }
        async handlerDrop(e) {
            e.preventDefault();
            const { dataTransfer } = e;
            if (!dataTransfer) {
                return;
            }
            const { files } = dataTransfer;
            if (!files.length) {
                return;
            }
            const file = files[0];
            const { selected } = this;
            if (selected === 'file') {
                this.value = file;
            }
            else if (selected === 'multipart') {
                const editor = this.shadowRoot.querySelector('http-body-multipart-editor');
                if (!editor) {
                    throw new Error(`Invalid state. The <http-body-multipart-editor> element was removed from the DOM.`);
                }
                if (!e.ctrlKey && !e.metaKey) {
                    editor.value = new FormData();
                }
                const ps = Array.from(files).map((item) => editor.addFile(item));
                await Promise.all(ps);
            }
            else {
                const payload = await PayloadSerializer.stringifyBlob(file);
                this.value = payload.data;
                const { type } = file;
                if (type) {
                    Events.Http.Request.State.contentTypeChange(type, this);
                }
            }
            this.notifyChange();
        }
        handleDragOver(e) {
            e.preventDefault();
        }
        handleAddUrlEncode() {
            const editor = this.urlEncodedEditor;
            if (editor) {
                editor.addParameter();
            }
        }
        handleUrlEncode() {
            const editor = this.urlEncodedEditor;
            if (editor) {
                editor.encodeParameters();
            }
        }
        handleUrlDecode() {
            const editor = this.urlEncodedEditor;
            if (editor) {
                editor.decodeParameters();
            }
        }
        handleUrlEncodeAutoChange(e) {
            const input = e.target;
            this.autoEncode = !!input.checked;
            const editor = this.urlEncodedEditor;
            if (editor) {
                this.updateUrlEncodedValue(editor);
            }
        }
        handleMultipartAddText() {
            const editor = this.multipartEditor;
            if (editor) {
                editor.addEmptyText();
            }
        }
        handleMultipartAddFile() {
            const editor = this.multipartEditor;
            if (editor) {
                editor.addEmptyFile();
            }
        }
        render() {
            return html `
      <div class="actions">${this.renderBodySelector()} ${this.renderMainActions()}</div>
      ${this.renderInvalidMime()}
      <div class="container">${this.renderEditor()}</div>
    `;
        }
        /**
         * @returns The template for the dropdown menu for the editor type
         */
        renderBodySelector() {
            const { selected } = this;
            const selectedItem = editorTypes.find((i) => i.id === selected);
            const label = (selectedItem && selectedItem.label) || 'Select editor';
            return html `
      <ui-dropdown-list
        verticalAlign="top"
        @select="${this.handleTypeChange}"
        class="type-dropdown"
        closeOnOutsideClick
      >
        <ui-button color="tonal" title="Select editor type" aria-label="Opens a menu to select editor type">
          <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
          ${label}
        </ui-button>
        <ui-list slot="dropdown" role="menu"> ${this.renderBodyTypeOptions()} </ui-list>
      </ui-dropdown-list>
    `;
        }
        renderBodyTypeOptions() {
            return html `
      ${editorTypes.map((info) => html `
          <ui-list-item role="menuitem" data-type="${info.id}" title="${info.title}"> ${info.label} </ui-list-item>
        `)}
    `;
        }
        /**
         * @returns The template for the main editor actions.
         */
        renderMainActions() {
            const { selected } = this;
            if (selected === 'raw') {
                return this.renderTextEditorActions();
            }
            if (selected === 'urlEncode') {
                return this.renderUrlEncodeEditorActions();
            }
            if (selected === 'multipart') {
                return this.renderMultipartActions();
            }
            return nothing;
        }
        renderTextEditorActions() {
            const label = monacoContentTypes[this.mimeValue || ''] || monacoContentTypes[''];
            return html `
      <ui-dropdown-list
        verticalAlign="top"
        @select="${this.handleMimeTypeSelect}"
        class="mime-dropdown"
        closeOnOutsideClick
      >
        <ui-button
          color="tonal"
          title="Select media type. This overrides the content-type header"
          aria-label="Editor media type"
        >
          <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
          ${label}
        </ui-button>
        <ui-list slot="dropdown" role="menu"> ${this.renderMonacoOptions()} </ui-list>
      </ui-dropdown-list>
    `;
        }
        renderMonacoOptions() {
            return Object.keys(monacoContentTypes).map((key) => html `
        ${key === '' ? html `<ui-divider></ui-divider>` : nothing}
        <ui-list-item role="menuitem" data-type="${key}"> ${monacoContentTypes[key]} </ui-list-item>
      `);
        }
        renderUrlEncodeEditorActions() {
            const { autoEncode } = this;
            return html `
      <ui-button
        color="tonal"
        aria-label="Adds a new parameter"
        title="Adds a new parameter"
        @click="${this.handleAddUrlEncode}"
      >
        <ui-icon slot="icon" icon="add" role="presentation"></ui-icon>
        Add
      </ui-button>
      <ui-button
        color="outlined"
        title="URL encodes parameters in the editor"
        aria-label="URL encodes parameters in the editor"
        @click="${this.handleUrlEncode}"
        ?disabled="${autoEncode}"
      >
        URL encode
      </ui-button>
      <ui-button
        color="outlined"
        title="URL decodes parameters in the editor"
        aria-label="URL decodes parameters in the editor"
        @click="${this.handleUrlDecode}"
        ?disabled="${autoEncode}"
      >
        URL decode
      </ui-button>
      <label title="When set it automatically encodes the values before sending the request" class="label-medium">
        <ui-checkbox .checked="${autoEncode}" @change="${this.handleUrlEncodeAutoChange}"></ui-checkbox>
        Encode on send
      </label>
    `;
        }
        renderMultipartActions() {
            return html `
      <ui-button
        color="outlined"
        title="Adds a new part with a file value"
        aria-label="Adds a new part with a file value"
        @click="${this.handleMultipartAddFile}"
      >
        Add file part
      </ui-button>
      <ui-button
        color="outlined"
        title="Adds a new part with a text value"
        aria-label="Adds a new part with a text value"
        @click="${this.handleMultipartAddText}"
      >
        Add text part
      </ui-button>
    `;
        }
        /**
         * @returns A template for currently rendered editor
         */
        renderEditor() {
            switch (this.selected) {
                case 'raw':
                    return this.renderRawEditor();
                case 'urlEncode':
                    return this.renderUrlEncodeEditor();
                case 'multipart':
                    return this.renderMultipartEditor();
                case 'file':
                    return this.renderFileEditor();
                default:
                    return this.renderNoEditor();
            }
        }
        /**
         * @returns The template for the raw editor
         */
        renderRawEditor() {
            let { value } = this;
            const model = this.readMetaModel('raw');
            const hasModel = Array.isArray(model) && model.length;
            if (typeof value !== 'string') {
                value = '';
            }
            if (!value && hasModel) {
                const [item] = model;
                value = item.value;
            }
            return this.renderTextEditor(value);
        }
        /**
         * @param value The editor value
         * @returns The template for the Monaco editor
         */
        renderTextEditor(value) {
            const { contentType } = this;
            return html ` <http-body-text-editor
      .value="${value}"
      .contentType="${contentType}"
      @change="${this.handleRawChange}"
      allowFormInfo
    ></http-body-text-editor>`;
        }
        /**
         * @returns A template for the application/x-www-form-urlencoded editor
         */
        renderUrlEncodeEditor() {
            const { autoEncode } = this;
            const info = this.readMetaModel('urlEncode');
            const model = Array.isArray(info) && info[0] && info[0].model;
            return html `
      <http-body-urlencoded-editor
        ?autoEncode="${autoEncode}"
        .model="${ifProperty(model)}"
        @change="${this.handleUrlEncodeChange}"
        allowFormInfo
      ></http-body-urlencoded-editor>
    `;
        }
        /**
         * @returns A template for the multipart editor
         */
        renderMultipartEditor() {
            const model = this.readMetaModel('multipart');
            return html `
      <http-body-multipart-editor
        .model="${ifProperty(model)}"
        @change="${this.handleMultipartChange}"
        allowFormInfo
      ></http-body-multipart-editor>
    `;
        }
        /**
         * @returns A template for the file input editor
         */
        renderFileEditor() {
            return html `
      <div class="file-picker">
        <ui-button color="text" @click="${this.handlePickFile}">Choose a file</ui-button>
        ${this.renderFileDetail()}
      </div>
      <input type="file" class="binary-hidden" @change="${this.handleFileChange}" />
      ${this.renderFormInfo()}
    `;
        }
        renderFormInfo() {
            return html `
      <p class="form-info body-small">Note that the content-type header will be added when the request is sent.</p>
    `;
        }
        /**
         * @returns A template for the missing selection
         */
        renderNoEditor() {
            return html `<div class="empty-editor">Invalid editor selected.</div>`;
        }
        /**
         * @returns A template for the file details.
         */
        renderFileDetail() {
            if (!this.hasFile) {
                this.restoreFileModel();
            }
            if (!this.hasFile) {
                return '';
            }
            const { value } = this;
            const { size, name } = value;
            return html `
      <div class="file-info label-medium">
        <span class="file-name">${name || 'unknown name'}</span>
        <span class="file-size">${size} bytes</span>
        <ui-icon-button
          aria-label="Delete file"
          title="Deletes the file"
          @click="${this.handleClearFile}"
          ?disabled="${this.readOnly}"
        >
          <ui-icon icon="deleteOutline" role="presentation"></ui-icon>
        </ui-icon-button>
      </div>
    `;
        }
        renderInvalidMime() {
            if (!this.invalidMimeValue) {
                return '';
            }
            const id = this.invalidMimeMessage;
            return html `
      <div class="invalid-mime body-medium">
        <ui-icon icon="warning" class="warning-icon"></ui-icon>
        ${id === 1 ? this.renderFixableInvalidMime('multipart/form-data') : ''}
        ${id === 2 ? this.renderFixableInvalidMime('application/x-www-form-urlencoded') : ''}
      </div>
    `;
        }
        /**
         * @returns A template for fixable mime type mismatch message.
         */
        renderFixableInvalidMime(suggested) {
            return html `
      <p class="message body-medium">
        The <code>content-type</code> header has different value than <b>${suggested}</b>.
      </p>
      <ui-button
        class="fix"
        title="Updates the content type header for the request"
        @click="${this.autoFixMime}"
        color="tonal"
        >Fix</ui-button
      >
    `;
        }
    };
})();
/**
 * @fires change When the value and the model change
 */
export default BodyEditor;
//# sourceMappingURL=BodyEditor.js.map