{% extends 'base.html' %}
{% block title %} Арка | API Docs {% endblock %}

{% block styles %}
    <style>
        .table-wrapper, .constructor-result > pre {
            overflow-x: auto;
        }
        table {
            border-collapse: collapse;
        }

        td, th {
            border: var(--brand-color) solid 1px;
            padding: 0.5em;
        }

        th {
            color: var(--brand-color);
        }

        details > div {
            margin-top: 1em;
            margin-bottom: 1em;
            margin-left: 0.5em;
            padding-left: 1em;
            border-left: var(--brand-color) solid 1px;
        }

        .method-div {
            margin: 1em 0;
        }

        .method-div summary {
            font-weight: bolder;
            font-size: x-large;
        }

        /* =============================== */

        .constructor-wrapper {
            background: var(--bkg-color2);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .constructor-fields {
            padding-right: 0.5em;
        }

        .constructor-param {
            padding: 0.5em 0;
            display: block;
            margin: 0.2em 0;
        }

        .constructor-param > * {
            display: block;
        }

        .constructor-param > input, .constructor-param > button {
            border: var(--brand-color) solid 2px;
            border-radius: 5px;
            padding: 0.5em;
        }

        .constructor-result {
            min-width: 200px;
        }
    </style>
{% endblock %}

{% block content %}
    <h1 class="page-header"> Список методов API </h1>
    <div>
        <p> Ну а пока ты ждешь рабочего API для заказов и портфолио, можно послушать музычку </p>
        <audio preload="none" controls src="/m.mp3"></audio>
        <p> А еще можно попробовать сделать запросы в конструкторе, он есть для каждого метода </p>
    </div>

    <script>
        function getAccessToken(new_value) {
            if (new_value === undefined || new_value === null || new_value === "") {
                let res = localStorage.getItem("access_token")
                if (res === null) {
                    return ""
                }
                return res
            } else {
                console.log(`Storing ${new_value} as token`)
                localStorage.setItem("access_token", new_value)
                document.getElementById('current_access_token').innerText = new_value
                return new_value
            }
        }
        async function sendRequest(method, params) {
            let url = `/methods/${method}`
            if (params !== undefined && params !== null) {
                url += "?" + new URLSearchParams(params)
            }
            return await fetch(url)
        }

        async function makeRequest(view, method, inputs) {
            let params = {}
            for (let k in inputs) {
                let element = document.getElementById(inputs[k])
                const name = element.name
                {#let val = encodeURIComponent(element.value)#}
                let val = element.value
                if (name === "access_token") {
                    val = getAccessToken(val)
                }
                if (val.length > 0)
                    params[name] = val
            }
            let res = await sendRequest(method, params)
            const text = await res.text()
            document.getElementById(view).innerText = text

            // чтобы запоминался токен
            try {
                let j = JSON.parse(text)
                getAccessToken(j["response"]["access_token"])
            } catch (e) {}
        }
    </script>

    {% for method in api_methods %}
        <div class="method-div">
            <details>
                <summary>{{ method.name }}</summary>

                <div>
                    <h3>Описание</h3>
                    <p>
                        {{ method.doc | safe }}
                    </p>

                    <h3>Параметры</h3>
                    {% if method.params %}
                        <div class="table-wrapper"><table>
                            <tr>
                                <th>Название</th>
                                <th>Тип</th>
                                <th>Описание</th>
                                <th>Обязательный</th>
                            </tr>

                            {% for param in method.params %}
                                <tr>
                                    <td>{{ param.name }}</td>
                                    <td>{{ param.type }}</td>
                                    <td>{{ param.description | safe }}</td>
                                    <td>{{ param.required }}</td>
                                </tr>
                            {% endfor %}
                        </table></div>
                    {% else %}
                        <p>
                            Этот метод не принимает параметров.
                        </p>
                    {% endif %}

                    <h3>Результат</h3>
                    <p>
                        {{ method.returns | safe }}
                    </p>
                    <p>
                        Ссылка на метод (без параметров): <a href="/methods/{{ method.name }}">{{ method.name }}</a>
                    </p>
                    <details>
                        <summary>Конструктор</summary>
                        <div class="constructor-wrapper" id="view-{{ method.name }}">
                            <div class="constructor-fields">
                                <div style="">
                                    <h3>Параметры</h3>
                                    <hr>
                                </div>

                                {% if method.params %}
                                    {% for param in method.params %}
                                        <div class="constructor-param">
                                            <label for="param-{{ method.name }}-{{ param.name }}">{{ param.name }}</label>
                                            <input type="text" name="{{ param.name }}" id="param-{{ method.name }}-{{ param.name }}">
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <div class="constructor-param">
                                        <p>
                                            Этот метод не принимает параметров.
                                        </p>
                                    </div>
                                {% endif %}

                                <div class="constructor-param">
                                    <button onclick="makeRequest('result-{{ method.name }}', '{{ method.name }}',
                                            [{% for param in method.params %}'param-{{ method.name }}-{{ param.name }}', {% endfor %}])">Выполнить</button>
                                </div>
                            </div>
                            <div class="constructor-result">
                                <h3>Результат</h3>
                                <hr>
                                <pre id="result-{{ method.name }}"></pre>
                            </div>
                        </div>
                    </details>
                </div>

            </details>
        </div>
    {% endfor %}

    <div style="text-align: center; background: var(--bkg-color2); margin: 0; margin-top: 3em; padding: 2em; overflow-wrap: break-word;">
        Перейти в <a href="/admin">админку</a>.
        <div>
            Текущий токен: <i id="current_access_token"></i><br><a onclick="localStorage.clear(); document.getElementById('current_access_token').innerText = ''">Сбросить</a>
        </div>
    </div>

    <script>
        window.onload = (event) => {
            const at = localStorage.getItem("access_token")
            if (at !== null) {
                document.getElementById('current_access_token').innerText = at
            }
        };
    </script>
{% endblock %}