/**
 * Copyright 2015-2019 OpenCB
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {html, LitElement} from "lit";
import UtilsNew from "../../core/utilsNew.js";
import "../commons/forms/data-form.js";
import "./rest-endpoint.js";

export default class RestApi extends LitElement {

    constructor() {
        super();

        this._init();
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            title: {
                type: String
            },
            opencgaSession: {
                type: Object
            },
        };
    }

    _init() {
        this._prefix = UtilsNew.randomString(8);
        this.api = [];
        this.methodOrder = {
            "GET": 1,
            "POST": 2,
            "DELETE": 3
        };
        this.methodColor = {
            "GET": "blue",
            "POST": "darkorange",
            "DELETE": "red"
        };
    }

    update(changedProperties) {
        if (changedProperties.has("opencgaSession")) {
            this.opencgaSessionObserver();
        }
        super.update(changedProperties);
    }

    opencgaSessionObserver() {

        if (this.opencgaSession) {
            this.opencgaSession.opencgaClient.meta().api()
                .then(responses => {
                    this.api = responses.responses[0].results[0];
                    if (this.api?.length > 0) {
                        if (!this.endpoint) {
                            this.endpoint = this.api[0].endpoints.find(endpoint => endpoint.method === "GET");
                        }
                    }
                    this.requestUpdate();
                })
                .catch(error => {});
        }
    }

    onClick(e, endpoint) {
        this.endpoint = endpoint;
        this.requestUpdate();
    }

    render() {
        return html`
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="col-md-4 pre-scrollable-custom">
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
                            ${this.api?.map(category => {
                                const categoryName = category.name.replaceAll(" ", "_");
                                const isFirst = category.name === this.api[0].name;
                                return html`
                                    <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="${categoryName}HeadingOne">
                                            <h5 class="panel-title">
                                                <div class="">
                                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#${categoryName}CollapseOne" aria-expanded="true" aria-controls="${category.name}CollapseOne">
                                                        <div style="margin-bottom: 10px">
                                                            ${category.name} <span class="badge pull-right">${category.endpoints?.length || "NA"}</span>
                                                        </div>
                                                        <div style="font-size: 1em;text-transform: none;letter-spacing: 1px">
                                                            ${category.path}
                                                        </div>
                                                    </a>
                                                </div>
                                            </h5>
                                        </div>
                                        <div id="${categoryName}CollapseOne" class="panel-collapse collapse ${isFirst ? "in" : ""}" role="tabpanel" aria-labelledby="${categoryName}HeadingOne">
                                            ${category.endpoints
                                                .sort((a, b) => {
                                                    return this.methodOrder[a.method] - this.methodOrder[b.method];
                                                })
                                                .map(endpoint => html`
                                                    <div class="panel-body" style="padding: 5px 15px">
                                                        <button class="btn btn-link" role="link" @click="${e => this.onClick(e, endpoint)}">
                                                            <span style="margin-right: 10px; font-weight: bold; color:${this.methodColor[endpoint.method]}">
                                                                ${endpoint.method}
                                                            </span>
                                                            <span style="font-weight: bold">
                                                                ${endpoint.path.replace("/{apiVersion}", "")}
                                                            </span>
                                                        </button>
                                                        <div class="help-block" style="margin: 0 15px">
                                                            ${endpoint.description}
                                                        </div>
                                                    </div>
                                                `)}
                                        </div>
                                    </div>
                                `;
                            })}
                        </div>
                    </div>

                    <div class="col-md-8">
                        <rest-endpoint
                            .endpoint="${this.endpoint}"
                            .opencgaSession="${this.opencgaSession}">
                        </rest-endpoint>
                    </div>
                </div>
            </div>
        `;
    }

}

customElements.define("rest-api", RestApi);

@@ -4978,16 +4978,57 @@
 e=%22link%22
+ style=%22display:flex;white-space:normal;%22
  @click=
@@ -5457,21 +5457,59 @@
 -weight:
- 
 bold
+;word-break:break-word;text-align:left;
 %22%3E%0A     

fix displaying large endpoints in api menu (#319)