$(document).ready(function() {
    let base_url = "http://192.168.1.105:8000/";
    let ids_list = [];

    $.get("ip.txt", function(data) {
        console.log(data);
        base_url = `http://${data}:8000/`;
        init_wesite();
    });

    function append_element(image_urls, descriptions, title, id) {
        ids_list.push(id);

        let template = `
            <div class="wsList hey">
            <div></div>
            <img src="${image_urls[0]}" alt="#" class="obrazok_small">
            <div id="list_item_holder${id}" class="list_item_holder">
                <div class="title${id}">${title}</div>
                <div class="short_description">${descriptions[0]}</div>
            </div>
            <div id="arrow${id}" class="arrow">&#9660</div>
            </div>
            <!-- Rozšírené malé zobrazenie -->
            <div id="listExpand${id}" class="listHide">
                <img src="${image_urls[1]}" alt="#" class="obrazok_big">
                <div class="text_small">${descriptions[1]}</div>
                <div class="sensors_small">
                </div>
                <div class="info_small"></div>
            </div>
            <!-- Veľké zobrazenie -->
            <div id="big${id}" class="big">
                <div class="imgBig"><img class="wsImg" src="${image_urls[1]}" alt="#"></div>
                <div class="text_big">${descriptions[1]}</div>
                <div class="sensors_big">
                </div>
                <div class="info_big"></div>
            </div>`;
    
        $("body").append(template);

        $.get(`${base_url}${id}/sensors`, function(data1) {
            Object.keys(data1).forEach(function(key) {
                let value = data1[key];
                if (key.startsWith("[translate]-")) {
                    key = key.slice(12, key.length);
                }
                $(".sensors_small").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
                $(".sensors_big").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
            });
        });

        $(".arrow").click(function() {

            let id = this.id;
            id = id.slice(id.length-1, id.length);
    
            $(`#arrow${id}`).toggleClass("mystyle");
            $(`#listExpand${id}`).toggleClass("expand");
            id.a();
        });

        $(".list_item_holder").click(function() {
            let id = this.id;
            id = id.slice(id.length-1, id.length);
            
            clear_big_display();
            $(`#big${id}`).show();
        });
    
    }

    function clear_big_display(){
        ids_list.forEach(function(id) {
            $(`#big${id}`).hide();
        });
    }

    function init_wesite() {
        $.get(`${base_url}devices_list`, function(data) {

            let connected_id = data[0]["connected_id"];
            let urls = ["", ""];
            let descriptions = ["", ""];
            let title = "";
            let query = [[]];
    
            for (let i = 1; i < data.length; i++) {
                let spot_data = data[i];
                let spot_id = spot_data["ID"]
                urls = [`${base_url}files/${spot_id}/${spot_data["description"]["photo_s"]}`,
                        `${base_url}files/${spot_id}/${spot_data["description"]["photo_b"]}`];
                descriptions = [spot_data["description"]["description_s"],
                                spot_data["description"]["description_l"]];
                title = spot_data["description"]["title"];
    
                if (spot_id == connected_id) {
                    query[0] = [urls, descriptions, title, parseInt(spot_id)];
                } else {
                    query.push([urls, descriptions, title, parseInt(spot_id)]);
                }
            }
    
            for (let i = 0; i < query.length; i++) {
                append_element(query[i][0], query[i][1], query[i][2], query[i][3]);
            }
     
        })
    }
})