if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        console.log("group page content loaded");
        get_existing_data2();
    });
} else {
    get_existing_data2();
}

var room_color = "";
var colors = [];


function room_color(color) {
    switch (color) {
        case "Green":
            room_color = "#ff4d4d";
            break;
        case "Red":
            room_color = "#FF7B78";
            break;
        case "Orange":
            room_color = "#f38b00";
            break;
        default:
            room_color = "Grey";
    }
    return room_color;
}

function getfirstPart(str) {
    return str.split(' -')[0];
}

function getsecondPart(str) {
    return str.split('- ')[1];
}

function getUniqueColors(data) {
    var temp_arr = [];
    for (var i = 0; i < data.length; i++) {
        if (temp_arr[data[i].room]) continue;
        temp_arr[data[i].room] = true;
        colors.push(data[i].room);
    }
}

function set_up_objects(data){
    var data = [data];
    var group_lists = [];
    var page_data = [];
    var all_times = [];

    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < data[i].length; j++ ){

            group_lists.push(data[i][j]["c"]);
        }
    }


    group_lists.sort();

    group_lists.forEach(function(current_value) {
            var x = {
                moderator: current_value[0]["v"],
                room: current_value[7]["v"],
                time: current_value[5]["v"],
                link: current_value[8]["v"],
                id: current_value[9]["v"],
                participants: [],
                day: getfirstPart(current_value[5]["v"]),
                clocktime: getsecondPart(current_value[5]["v"])
            };
            all_times.push(x);
        });

        all_times.sort();

        getUniqueColors(all_times);

        zoom_details(colors);

        //get unique moderators with object keys
        page_data = all_times.filter((v, i, a) => a.findIndex(t => (t.moderator === v.moderator && t.time === v.time)) === i);

        
        // get participant data, add to page_data array
        group_lists.forEach(function(current_value) {
            for (var i = 0; i < page_data.length; i++) {
                if (page_data[i].moderator === current_value[0]["v"]) {
                    page_data[i].participants.push({
                        p_fname: current_value[1]["v"],
                        p_lname: current_value[2]["v"]
                    });
                }
            }
        });
        getDayGroups(page_data);
}


function get_existing_data2() {
    var results = [];

    $.get( "https://docs.google.com/spreadsheets/d/1hivjC4FTSyRS1wq4-Jz0KEsz949PiZybAyThze7fMcA/gviz/tq?tqx=out:json", function( data ) {
            const json = JSON.parse(data.substr(47).slice(0, -2));
            results = json.table.rows;
            set_up_objects(results);
    });
};

function getDayGroups(arr) {

    var sorted = {};

    for (var i = 0, max = arr.length; i < max; i++) {
        if (sorted[arr[i].day] == undefined) {
            sorted[arr[i].day] = [];
        }
        sorted[arr[i].day].push(arr[i]);
    }

    var Saturdays = sorted["Saturdays"];
    var Sundays = sorted["Sundays"];
    var Mondays = sorted["Mondays"];
    var Tuesdays = sorted["Tuesdays"];
    var Wednesdays = sorted["Wednesdays"];

    //sort by time of day and call tabs function
    if (Saturdays) {
        Saturdays.sort((a, b) => (a.clocktime > b.clocktime) ? 1 : -1);
        create_lists(Saturdays);
    }
    if (Sundays) {
        Sundays.sort((a, b) => (a.clocktime > b.clocktime) ? 1 : -1);
        create_lists(Sundays);
    }
    if (Mondays) {
        Mondays.sort((a, b) => (a.clocktime > b.clocktime) ? 1 : -1);
        create_lists(Mondays);
    }
    if (Tuesdays) {
        Tuesdays.sort((a, b) => (a.clocktime > b.clocktime) ? 1 : -1);
        create_lists(Tuesdays);
    }
    if (Wednesdays) {
        Wednesdays.sort((a, b) => (a.clocktime > b.clocktime) ? 1 : -1);
        create_lists(Wednesdays);
    }
}

function zoom_details(colors) {
    $(".red-room").remove();
    $(".green-room").remove();
    $(".orange-room").remove();
    colors.forEach(function(i) {
        if (i === "Red") {
            $(".zoom-container").append($(
                '<div class="red-room" style="background-color: #efefef; padding: 10px;">' +
                '<div style="margin-top: 20px; border-left: 8px solid #FF7B78;">' +
                '<div style="margin-left: 20px;">' +
                '<p>RED ROOM</p>' +
                '<ul style="margin-left: -20px; list-style-type: none;">' +
                '<li>' +
                '<p>Join by Computer:<strong>&nbsp;<a href="https://zoom.us/j/900745946">https://zoom.us/j/900745946</a></strong></p>' +
                '<p> Passcode: <strong>gci2023</strong></p>' +
                '<p style="margin-bottom: 3px;">Join by Phone: +1 669 900 6833 or +1 408 740 3766 or +1 646 876 9923 | Meeting ID: 900 745 946<br>' +
                '</p>' +
                '</li>' +
                '</ul>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<hr>'
            ))
        }
        if (i === "Green") {

            $(".zoom-container").append($(
                '<div class="green-room" style="background-color: #efefef; padding: 10px;">' +
                '<div style="margin-top: 20px; border-left: 8px solid #13C029;">' +
                '<div style="margin-left: 20px;">' +
                '<p>GREEN ROOM</p>' +
                '<ul style="margin-left: -20px; list-style-type: none;">' +
                '<li style="margin-bottom: 20px;">' +
                '<p>Join by Computer:<strong>&nbsp;<a href="https://zoom.us/j/559478596">https://zoom.us/j/559478596</a></strong></p>' +
                '<p>Passcode: <strong>gci2023</strong></p>' +
                '<p style="margin-bottom: 3px;">Join by Phone: +1 669 900 6833 or +1 408 740 3766 or +1 646 876 9923 | Meeting ID: 559 478 596<br>' +
                '</p>' +
                '</li>' +
                '</ul>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<hr>'
            ))
        }
        if (i === "Orange") {
            $(".zoom-container").append($(
                '<div class="orange-room" style="background-color: #efefef; padding: 10px;">' +
                '<div style="margin-top: 20px; border-left: 8px solid #f38b00;">' +
                '<div style="margin-left: 20px;">' +
                '<p>ORANGE ROOM</p>' +
                '<ul style="margin-left: -20px; list-style-type: none;">' +
                '<li style="margin-bottom: 20px;">' +
                '<p>Join by Computer:<strong>&nbsp;<a href="https://zoom.us/j/903665616">https://zoom.us/j/903665616</a></strong></p>' +
                '<p> Passcode: <strong>gci2023</strong></p>' +
                '<p style="margin-bottom: 3px;">Join by Phone: +1 669 900 6833 or +1 408 740 3766 or +1 646 876 9923 | Meeting ID: 903 665 616<br>' +
                '</p>' +
                '</li>' +
                '</ul>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<hr>'
            ))
        }
    })
}


function create_lists(group) {
    var element_id = "#" + group[0].day;
    var element_class = "." + group[0].day;

    $(element_id).remove();
    $(element_class).remove();
    $(".groups-container").append($(
        '<button class="accordion2" class=' + group[0].day + '>' + group[0].day + '</button>' +
        '<div class="panel2" id="' + group[0].day +
        '"></div>'
    ));
    group.forEach(function(i) {
        switch (i.room) {
            case "Green":
                room_color = "#009933";
                break;
            case "Red":
                room_color = "#FF7B78";
                break;
            case "Orange":
                room_color = "#f38b00";
                break;
            case "None":
                room_color = "#808080";
                break;
            default:
                room_color = "#808080";
        }

        $("#" + group[0].day).append($(
            '<ul style="list-style-type: none; margin-left: 0px;">' +
            '<li>' +
            '<div style="border-left: 6px solid' +
            room_color +
            '; border-top: 1px solid' +
            room_color +
            ';">' +
            '<p style="margin: 10px 0 0 10px; line-height: 135%;"><strong>' +
            i.room +
            ' Room ' +
            '<br></strong>' +
            '<a target="_blank" style="color:' +
            room_color +
            '!important;" href="' +
            i.link +
            '">' +
            i.link +
            '</a>' +
            '<br>' +
            'Passcode: gci2023' +
            '<br>' +
            i.time +
            '</p>' +
            '</div>' +
            '</li>' +
            '<li style="margin-left:20px;">' +
            '<br><strong>Moderator: ' +
            i.moderator +
            '</strong>' +
            '</li>' +
            '</ul>'
        ))

        i.participants.forEach(function(j) {

            $("#" + group[0].day).append($(
                '<ul style="list-style-type: none; margin-left: 20px; line-height:50%;">' +
                '<li>' +
                j.p_fname +
                '&nbsp;' +
                j.p_lname +
                '</li>' +
                '</ul>'
            ))
        })

        $("#" + group[0].day).append($("<br>"));

    })
}

$(document).on('click', '.accordion2', function() {
    this.classList.toggle("active");
    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }

});