const Stand_list = {
    list: [],
    init: async () => {
        let html = await fetch('/lib/pages/stand/list/index.html').then((response) => response.text());
        app.innerHTML = html;

        Stand_list.setHTML();

        if (USER.possibilities.can_add_stand) {
            document.getElementById("buttons-list").style.display = "flex";
            document.getElementById("constructorButton").style.display = "";
        }
    },
    loadAPI: async function (url) {
        const uuid = localStorage.getItem("uuid");
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                "Content-Type": "application/json",
                "Authorization": uuid
            }
        });
        Stand_list.list = await response.json();
        return Stand_list.list;
    },
    setHTML: async function () {
        const block = document.getElementById('list');
        const null_list = document.getElementById('null-list');
        const load_list = document.getElementById('load-list');

        null_list.setAttribute("data-visible", "false");
        load_list.setAttribute("data-visible", "true");


        const url = `${CONFIG.api}stand/list`;
        let list = this.list.length > 0 ? this.list : await this.loadAPI(url);

        if (list.length == 0) {
            null_list.setAttribute("data-visible", "true");
            load_list.setAttribute("data-visible", "false");

            return;
        } else {
            null_list.setAttribute("data-visible", "false");
            load_list.setAttribute("data-visible", "false");

            let html = "";
            for (const element of list) {
                html += this.renderCard({ element });
            }

            block.innerHTML = html;
        }
    },
    renderCard: ({ element, pack=0 }) => {
        const images = [
            ['stand_1.png', 'stand_2.png', 'stand_3.png'],
            ['stand_4.png', 'stand_5.png']
        ];
        const randomImage = images[pack][Math.floor(Math.random() * images[pack].length)];

        const editor = USER.possibilities.can_add_stand
            ? `<a id="editor_button" class="button-edit" data-route title="Змінити графік" href="/stand/editor/${element.id}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path></svg></a>`
            : ``;

        return `
            <div class="card">
                <div class="contents">
                    <div class="image">
                        <img src="/img/${randomImage}">
                    </div>
                    <div class="info">
                        <div>
                            <p>${element.title}</p>
                        </div>
                        ${editor}
                    </div>
                </div>
                <a href="/stand/card/${element.id}" data-route></a>
            </div>
        `;
    },
}