//------------------------------------------------------------------------------
// Engine - Hauptfunktion
//------------------------------------------------------------------------------

var config = {}

//-----------------------------------------------------------------------------------//
function bodyDataAction ()
//-----------------------------------------------------------------------------------//
{
    var menuButtons = document.getElementById("menuBtn").
                            getElementsByTagName("A");
    for (var i = 0; i < menuButtons.length; i++) {
        menuButtons[i].onclick = function(evt) {
                console.log("Menu");
                var res = evt.target.id;
                menu(res);
        };
    }
    var contentButtons = document.getElementsByTagName("button");
    for (var i = 0; i < contentButtons.length; i++) {
        contentButtons[i].onclick = function(evt) {
                console.log("Button");
                var res = evt.target.id;
                menu('switchRequest', res);
        };
    }
}

//-----------------------------------------------------------------------------------//
function menu (message, request=null)
//-----------------------------------------------------------------------------------//
{
    var selectedId = $(".selected").attr('id');
    switch (message)
    {
        case 'pageDevices':
            console.log( "pageDevices")
            $( ".rendered" ).empty();
            generateDevices();
            document.getElementById('pageDevices').className = "nav-link active";
            document.getElementById('pageSettings').className = "nav-link";
            break;
        case 'pageSettings':
            console.log( "pageSettings")
            $( ".rendered" ).empty();
            document.getElementById('pageDevices').className = "nav-link";
            document.getElementById('pageSettings').className = "nav-link active";
            break;
        case 'switchRequest':
            console.log( request )
            switchRequest(request);
            break;
        default:
            alert ('[Engine] Unbekannte Anfrage: ' + message);
    }
}

//-----------------------------------------------------------------------------------//
function switchRequest (request)
//-----------------------------------------------------------------------------------//
{
    var req = request.split(".");
    switch (req[0])
    {
        case 'yeelight':
            var bulb = req[1]
            var type = req[2]
            var value = req[3]
            var cmd = {};
            cmd[bulb] = {};
            cmd[bulb][type] = value;
            postYeelight(cmd);
            break;
        default:
            alert ('[POST] Unbekannte Anfrage: ' + req[0]);
    }
}

//-----------------------------------------------------------------------------------//
function generateYeelightBulbs ( data , type)
//-----------------------------------------------------------------------------------//
{
    $( ".rendered" ).append($('<div class="yeelight'+type+' container-fluid text-center bg-grey">'));
    $( ".yeelight"+type ).append($("<h3></h3>").text("Yeelight " + type));
    $( ".yeelight"+type ).append($('<div class="yeelight'+type+'row row text-center">'));
    for (bulb in data)
    {
        $( ".yeelight"+type+"row" ).append($('<div class="'+ bulb + 'col col-sm-3 bg-grey">'));
        $( "." + bulb + "col" ).append($("<p></p>").text(bulb));
        $( "." + bulb + "col" ).append($('<div class="' + bulb + 'btn btn-group">'));
        var configBulb = data[bulb]['config']
        for (setting in configBulb)
        {
            if (configBulb[setting]['state'] == "switch")
            {
                var command = "on";
                $( "." + bulb + "btn" ).append($('<button '+
                    'id="yeelight.'+bulb+'.'+setting+'.on" ' +
                    'type="button" class="' + bulb + 'btnAn btn btn-primary">An</button>'));
                var buttonOn = document.getElementById('yeelight.'+bulb+'.'+setting+'.on');
                buttonOn.onclick = function(evt) {
                    var res = evt.target.id;
                    menu('switchRequest', res);}
                var command = "off";
                $( "." + bulb + "btn" ).append($('<button '+
                    'id="yeelight.'+bulb+'.'+setting+'.off" ' +
                    'type="button" class="' + bulb + 'btnAn btn btn-primary">Aus</button>'));
                var buttonOff = document.getElementById('yeelight.'+bulb+'.'+setting+'.off');
                buttonOff.onclick = function(evt) {
                    var res = evt.target.id;
                    menu('switchRequest', res);}
            }
        }
    }
}

//-----------------------------------------------------------------------------------//
function renderYeelightGroups ( data )
//-----------------------------------------------------------------------------------//
{
    $( ".rendered" ).append('<h1 class="grp my-4">Yeelight<small>Gruppen</small></h1>');
    $( ".rendered" ).append('<div class="rowGrp row">');
    for(group in data)
    {
        var devicesString = ""
        for (device in data[group]['devices'])
        {
            if(devicesString == "")
            {
                devicesString = device;
            }
            else
            {
                devicesString = devicesString + ', ' + device;
            }
        }
        $( ".rowGrp" ).append('    <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">'+
        '<div class="card h-100">'+
            '<div class="card-body">'+
                '<h4 class="card-title">'+
                    '<a href="#">'+ group + '</a>'+
                '</h4>'+
                '<div class="card-text">'+
                    '<div class="btn-group">'+
                        '<button id="yeelight.'+group+'.power.on" type="button" class="btn btn-primary">An</button>'+
                        '<button id="yeelight.'+group+'.power.off" type="button" class="btn btn-primary">Aus</button>'+
                    '</div>'+
                '</div>'+
                '<p class="card-text"></p>'+
                '<p class="card-text"></p>'+
                '<h5 class="card-title">'+
                    '<a href="#">Geräte</a>'+
                '</h5>'+
                '<p class="card-text">'+devicesString+'</p>'+
            '</div>'+
        '</div>');
    }
}

//-----------------------------------------------------------------------------------//
function loadYeelightGroups ( data )
//-----------------------------------------------------------------------------------//
{
    var groups = {}
    for (bulb in data)
    {
        for (group in data[bulb]['groups'])
        {
            if (group in groups)
            {
                groups[group]['devices'][bulb] = "";
            }
            else
            {
                groups[group] = {};
                groups[group] = data[bulb];
                groups[group]['devices'] = {};
                groups[group]['devices'][bulb] = "";
            }
        }
    }
    return groups;
}

//-----------------------------------------------------------------------------------//
function generateDevices (  )
//-----------------------------------------------------------------------------------//
{
    for (module in config)
    {
        if(module.localeCompare("yeelight") == 0)
        {
            yeelightGroups = loadYeelightGroups(config[module]);
            renderYeelightGroups(yeelightGroups);
        }
    }
    bodyDataAction();

    return 0;
}

//-----------------------------------------------------------------------------------//
function getConfig ( )
//-----------------------------------------------------------------------------------//
{
    $.ajax('/rest/config', {
        type : 'GET',
        dataType: "json",
        success : function(data) {
            config = data;
            bodyDataAction();
            menu("pageDevices");
        }
    });
}

//-----------------------------------------------------------------------------------//
function postYeelight ( cmd )
//-----------------------------------------------------------------------------------//
{
    $.ajax('/rest/yeelight', {
        type : 'POST',
        dataType: "json",
        contentType: 'application/json',
        data : JSON.stringify(cmd),
        success : function(data) {
            console.log(data);
        }
    });
}

//-----------------------------------------------------------------------------------//
$(function() {
    console.log("ONLOAD");

    getConfig();

    console.log("Engine LOADED");
});
//-----------------------------------------------------------------------------------//