{% extends 'base.html' %}

{% block styles %}
    <style>

    </style>
{% endblock %}

{% block header %}
<h1 class="page-header"> Мониторинг водозаборного узла </h1>
{% if user.is_superuser %}
<a href="/admin">Админка</a>
{% endif %}
{% endblock %}

{% block content %}
    <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 = 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 %}