var arr = [];

function generateTable(colNames, rowNames) {
    var $table = $("<table>", {
        class: "my-table"
    });
    var $thead = $("<thead>");
    var $tbody = $("<tbody>");
    var $tr = $("<tr>");

    var imageSrc = "../assets/media/timetable/no-electricity.png";
    arr = [];

    colNames.forEach(function(colName, i) {
        var $th = $("<th>", {
            html: colName,
            class: i == 0 ? "my-th_main" : "my-th2"
        });
        $tr.append($th);        
    });
    $thead.append($tr);
    $table.append($thead);

    // Initialize the 2D array
    arr = new Array(rowNames.length);

    rowNames.forEach(function(rowName, i) {
        var $tr = $("<tr>");
        var $th = $("<th>", {
            text: rowName,
            class: "my-th"
        });
        $tr.append($th);

        // Initialize each row of the 2D array
        arr[i] = new Array(colNames.length - 1);

        for (var j = 0; j < colNames.length - 1; j++) {
            var $td = $("<td>", {
                class: "my-td",
                id: "cell_" + i + "_" + j
            });
            var $img = $("<img>", {
                src: imageSrc,
                class: "no-light-img"
            }).hide();

            $td.append($img);

            $td.attr('data-val', 0);

            //$td.attr("onclick", "switchColor(" + i + "," + j + ")");

            $tr.append($td);

            // Set default value for each cell in the 2D array
            arr[i][j] = 0;
        }
        $tbody.append($tr);
    });

    $table.append($tbody);
    $("#inside_container").prepend($table);
}


function getElement(i, j) {
    var el = $("#cell_" + i + "_" + j);
    if (!el) return null;
    return el;
}

function updateCell(i, j) {    
    let el = getElement(i, j);

    el.empty();
    el.css("background-color", "white");  


    var img = $("<div class='schedulled'></div>");
    img.css({
        "width": "35px",
        "height": "42px",
        "background-color": "rgb(0, 0, 0, 0)",
    });

    let x = arr[i][j];
    if (x > 0 && x < 1000) {
        el.css("background-color", "rgb(211, 212, 213)");
        //el.append("<span style='text-align: center; width: 100%; display: block; font-size: 20px'>" + x + "</span>");
        //el.children("img").css("display", "block");            

        el.append(img);
    } else if (x == 1000) {
        el.css("background-color", "#ffe500");
        el.append(img);
    } else if (x == 0) {           
                  
        el.children("img").css("display", "none");
    } else if (x == -100) {        
        el.css("background-color", "red");
        el.append(img);          
    }
}

function printTable() {    
    for (let i in arr) {        
        for (j in arr[i]) {
            updateCell(i, j);
        }
    }
}

function setCellValue(i, j, newValue) {
    let el = getElement(i, j);
    if (!el) {
        alert("no element [" + i + ", " + j + "]");
        return;
    }
    arr[i][j] = newValue;
    el.attr('data-val', newValue);
}


function table2array() {
    var data = [];
    for (var i = 0; i < 7; i++) {
        rowData = []
        for (var j = 0; j < 24; j++) {
            var el = $("#cell_" + i + "_" + j);
            var flag = el.attr("data-val");
            rowData.push(parseInt(flag));
        }
        data.push(rowData);
    };
    return data;
}




function playSavedAnimation() {
    var alertBox = $("<div>", {
        class: "alert-box"
    });

    var img = $("<img>", {
        src: "assets/media/timetable/saved-image.png",
        id: "savedImage"
    });



    var message = $("<span>", {
        text: "Збережено!"
    });
    alertBox.hide();
    alertBox.append(img);
    alertBox.append(message);
    alertBox.appendTo("body");
    alertBox.fadeIn(150);
    setTimeout(function() {
        alertBox.fadeOut(150);
    }, 1500);
}

function playSaveButtonAnimation() {
    var $button = $("#saveButton");
    $button.addClass("saveButton_disabled");
    $button.prop("disabled", true);
    setTimeout(function() {
        $button.removeClass("saveButton_disabled");
        $button.prop("disabled", false);
    }, 1500);
}


$("#saveButton").click(function() {

    playSaveButtonAnimation();

    //saveData();
});

$("#clearButton").click(function() {
    if (confirm("Ви точно бажаєте очистити увесь розклад?")) {
        clearTable();
    }
});

var channel_key = null;

function showLoading() {
    $('body').loadingOverlay(true, {
        backgroundColor: 'rgba(0,0,0,0.67)',
    });
}

function hideLoading() {
    $('body').loadingOverlay(false, {});
}

function isPortraitMode() {
    return window.matchMedia("(orientation: portrait)").matches;
}

$(document).ready(function() {



    let intervals = ["Часові <br> проміжки"];
    for (let i = 0; i < 24; i++) {
        let start = i < 10 ? "0" + i : i;
        let end = (i + 1) < 10 ? "0" + (i + 1) : (i + 1);
        let interval = start + "-" + end;
        intervals.push(interval);
    }

    generateTable(intervals, ["Понеділок", "Вівторок", "Середа", "Четвер", "П'ятниця", "Субота", "Неділя"]);

    initGame();    

    if (!isPortraitMode()) {
        $("#controlButton_container").css({"display": "none"});
    }

});