import { __esDecorate, __runInitializers } from "tslib";
import { LitElement, html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import CurlSnippet from '../../code-snippets/Bash/CurlSnippet.js';
import CcurlSnippet from '../../code-snippets/C/CcurlSnippet.js';
import RawSnippet from '../../code-snippets/HTTP/RawSnippet.js';
import FetchSnippet from '../../code-snippets/JavaScript/FetchSnippet.js';
import AsyncFetchSnippet from '../../code-snippets/JavaScript/AsyncFetchSnippet.js';
import NodeSnippet from '../../code-snippets/JavaScript/NodeSnippet.js';
import XhrSnippet from '../../code-snippets/JavaScript/XhrSnippet.js';
import JQuerySnippet from '../../code-snippets/JavaScript/jQuerySnippet.js';
import AxiosSnippet from '../../code-snippets/JavaScript/AxiosSnippet.js';
import Python27Snippet from '../../code-snippets/Python/Python27Snippet.js';
import Python31Snippet from '../../code-snippets/Python/Python31Snippet.js';
import RequestsSnippet from '../../code-snippets/Python/RequestsSnippet.js';
import PlatformSnippet from '../../code-snippets/Java/PlatformSnippet.js';
import SpringSnippet from '../../code-snippets/Java/SpringSnippet.js';
import DartSnippet from '../../code-snippets/Dart/DartSnippet.js';
import '../../md/dropdown-list/ui-dropdown-list.js';
import '../../md/list/ui-list.js';
import '../../md/list/ui-list-item.js';
import '../../md/button/ui-button.js';
import '../../md/icons/ui-icon.js';
const commands = [
    {
        id: 'bash-curl',
        label: 'cURL',
        snippet: new CurlSnippet(),
    },
    {
        id: 'http-raw',
        label: 'HTTP',
        snippet: new RawSnippet(),
    },
    {
        id: 'javascript',
        label: 'JavaScript',
    },
    {
        label: 'Async',
        id: 'javascript-async',
        parent: 'javascript',
        snippet: new AsyncFetchSnippet(),
    },
    {
        label: 'Fetch',
        id: 'javascript-fetch',
        parent: 'javascript',
        snippet: new FetchSnippet(),
    },
    {
        label: 'Node',
        id: 'javascript-node',
        parent: 'javascript',
        snippet: new NodeSnippet(),
    },
    {
        label: 'XHR',
        id: 'javascript-xhr',
        parent: 'javascript',
        snippet: new XhrSnippet(),
    },
    {
        label: 'jQuery',
        id: 'javascript-jquery',
        parent: 'javascript',
        snippet: new JQuerySnippet(),
    },
    {
        label: 'Axios',
        id: 'javascript-axios',
        parent: 'javascript',
        snippet: new AxiosSnippet(),
    },
    {
        label: 'Python',
        id: 'python',
    },
    {
        label: 'Requests',
        id: 'python-requests',
        parent: 'python',
        snippet: new RequestsSnippet(),
    },
    {
        label: 'Python 2.7',
        id: 'python-2.7',
        parent: 'python',
        snippet: new Python27Snippet(),
    },
    {
        label: 'Python 3.1',
        id: 'python-3.1',
        parent: 'python',
        snippet: new Python31Snippet(),
    },
    {
        label: 'C',
        id: 'c-curl',
        snippet: new CcurlSnippet(),
    },
    {
        label: 'Java',
        id: 'java',
    },
    {
        label: 'Spring',
        id: 'java-spring',
        parent: 'java',
        snippet: new SpringSnippet(),
    },
    {
        label: 'Native',
        id: 'java-platform',
        parent: 'java',
        snippet: new PlatformSnippet(),
    },
    {
        label: 'Dart',
        id: 'dart',
        snippet: new DartSnippet(),
    },
];
const topTabs = commands.filter((i) => !i.parent);
let HttpSnippets = (() => {
    let _classSuper = LitElement;
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _request_decorators;
    let _request_initializers = [];
    let _request_extraInitializers = [];
    let _code_decorators;
    let _code_initializers = [];
    let _code_extraInitializers = [];
    return class HttpSnippets extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _selected_decorators = [property({ type: String })];
            _request_decorators = [property({ type: Object })];
            _code_decorators = [state()];
            __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, _request_decorators, { kind: "accessor", name: "request", static: false, private: false, access: { has: obj => "request" in obj, get: obj => obj.request, set: (obj, value) => { obj.request = value; } }, metadata: _metadata }, _request_initializers, _request_extraInitializers);
            __esDecorate(this, null, _code_decorators, { kind: "accessor", name: "code", static: false, private: false, access: { has: obj => "code" in obj, get: obj => obj.code, set: (obj, value) => { obj.code = value; } }, metadata: _metadata }, _code_initializers, _code_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #selected_accessor_storage = __runInitializers(this, _selected_initializers, 'bash-curl');
        /**
         * The currently selected snippet.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        parentLanguage = (__runInitializers(this, _selected_extraInitializers), 'bash-curl');
        #request_accessor_storage = __runInitializers(this, _request_initializers, void 0);
        get request() { return this.#request_accessor_storage; }
        set request(value) { this.#request_accessor_storage = value; }
        #code_accessor_storage = (__runInitializers(this, _request_extraInitializers), __runInitializers(this, _code_initializers, void 0));
        get code() { return this.#code_accessor_storage; }
        set code(value) { this.#code_accessor_storage = value; }
        /**
         * The list of tab names to render in the view.
         */
        get groupTabs() {
            const result = [];
            commands.forEach((i) => {
                if (i.parent === this.parentLanguage) {
                    result.push(i);
                }
            });
            return result;
        }
        update(cp) {
            if (cp.has('request') || cp.has('selected')) {
                this.triggerCommand();
            }
            super.update(cp);
        }
        triggerCommand() {
            const { selected = 'bash-curl', request } = this;
            if (!request) {
                return;
            }
            const instance = commands.find((i) => i.id === selected);
            if (!instance || !instance.snippet) {
                return;
            }
            this.code = instance.snippet.tokenize(request);
        }
        handleGroupSelect(e) {
            const target = e.detail.item;
            if (!target) {
                return;
            }
            const { id } = target.dataset;
            if (!id) {
                return;
            }
            if (this.parentLanguage === id) {
                return;
            }
            const item = commands.find((i) => i.id === id);
            if (!item) {
                return;
            }
            if (!item.snippet) {
                const firstChild = commands.find((i) => i.parent === id);
                this.selected = firstChild.id;
                this.parentLanguage = id;
            }
            else {
                this.selected = id;
                this.parentLanguage = id;
            }
        }
        handleSubGroup(e) {
            const target = e.detail.item;
            if (!target) {
                return;
            }
            const { id } = target.dataset;
            if (!id) {
                return;
            }
            this.selected = id;
        }
        render() {
            return html ` ${this.renderSelectionOptions()} ${this.renderCode()} `;
        }
        renderSelectionOptions() {
            return html ` <div class="selection-options">${this.renderLanguageOptions()} ${this.renderFrameworkOptions()}</div> `;
        }
        renderLanguageOptions() {
            const selectedKey = this.parentLanguage;
            const selectedItem = topTabs.find((i) => i.id === selectedKey);
            const label = selectedItem ? selectedItem.label : 'Language';
            return html `
      <ui-dropdown-list
        verticalAlign="top"
        class="group-dropdown"
        closeOnOutsideClick
        @select="${this.handleGroupSelect}"
      >
        <ui-button color="tonal" title="Select language" aria-label="Opens a menu to select the language">
          <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
          ${label}
        </ui-button>
        <ui-list slot="dropdown" role="menu">
          ${topTabs.map((tab) => html `<ui-list-item role="menuitem" data-id="${tab.id}">${tab.label}</ui-list-item>`)}
        </ui-list>
      </ui-dropdown-list>
    `;
        }
        renderFrameworkOptions() {
            const { groupTabs, selected } = this;
            if (!groupTabs.length) {
                return '';
            }
            const selectedItem = groupTabs.find((i) => i.id === selected);
            const label = selectedItem ? selectedItem.label : 'Framework';
            return html `
      <ui-dropdown-list verticalAlign="top" class="group-dropdown" closeOnOutsideClick @select="${this.handleSubGroup}">
        <ui-button color="tonal" title="Select a framework" aria-label="Opens a menu to select the framework">
          <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
          ${label}
        </ui-button>
        <ui-list slot="dropdown" role="menu">
          ${groupTabs.map((tab) => html `<ui-list-item role="menuitem" data-id="${tab.id}">${tab.label}</ui-list-item>`)}
        </ui-list>
      </ui-dropdown-list>
    `;
        }
        renderCode() {
            if (!this.code) {
                return '';
            }
            return html ` <code class="code language-snippet"><pre>${unsafeHTML(this.code)}</pre></code> `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _code_extraInitializers);
        }
    };
})();
/**
 * An element that renders various code snippets from a basic definition of an HTTP request.
 */
export default HttpSnippets;
//# sourceMappingURL=HttpSnippets.js.map