let tableIO;

HTMLImports.whenReady(function () {
    if ( $.fn.dataTable.isDataTable( '#ioTable' ) ) {
        tableIO = $('#ioTable').DataTable();
    }
    else {
        tableIO = $('#ioTable').DataTable( {
            paging: true,
            retrieve: true,
            searching: true,
            ajax: {
                url: '/api/controllers',
                dataSrc: ''
            },
            columns: [
                { data: 'name' },
                { data: 'controllerClass' },
                { data: 'description' },
                { data: 'ipAddress' },
                { data: 'port' },
                { "defaultContent": " " }
            ],
            autoWidth: false,
            columnDefs: [
                { width: '10%', targets: 0 },
                { width: '15%', targets: 0 },
                { width: '35%', targets: 1 },
                { width: '15%', targets: 2 },
                { width: '15%', targets: 3 },
                { width: '10%', targets: 4 }
            ],
            "createdRow": createdRowTable5,
            "lengthMenu": [ [-1, 10, 25, 50], ["Все", 10, 25, 50] ],
            "language": {
                "search":         "Поиск:",
                "lengthMenu":     "Показывать _MENU_ строк",
                "info":           "Строки с _START_ по _END_ из _TOTAL_",
                "paginate": {
                    "next":       "Следущая",
                    "previous":   "Предыдущая"
                }
            }
        } );
    }
});

function reloadIoList() {
    tableIO.ajax.reload();
}

function createdRowTable5( row, data, dataIndex, cells ) {
    console.log("start createdRowTable5")
    console.log(data);
    if (data.enabled === false) {
        $('td:eq(0)', row).css('color', 'grey');
        $('td:eq(1)', row).css('color', 'grey');
        $('td:eq(2)', row).css('color', 'grey');
        $('td:eq(3)', row).css('color', 'grey');
        $('td:eq(4)', row).css('color', 'grey');
        $('td:eq(5)', row).html(
            `<button class="glyphicon glyphicon-trash" type="submit" onclick="return deleteController(value);" value=" ${data.id}" 
style="background:red; color:white; border-radius: 50%; height:40px;width:40px;"></button>

<button class="glyphicon glyphicon-pencil" type="submit" onclick="return editController(value);" value=" ${data.id}" 
style="background:orange; color:white; border-radius: 50%; height:40px;width:40px;"></button>

<button class="glyphicon glyphicon-off" type="submit" onclick="return enableController(value);" value=" ${data.id}" 
style="background:grey; color:white; border-radius: 50%; height:40px;width:40px;"></button>

`);
    } else {
        $('td:eq(5)', row).html(
            `<button class="glyphicon glyphicon-trash" type="submit" onclick="return deleteController(value);" value=" ${data.id}" 
style="background:red; color:white; border-radius: 50%; height:40px;width:40px;"></button>

<button class="glyphicon glyphicon-pencil" type="submit" onclick="return editController(value);" value=" ${data.id}" 
style="background:orange; color:white; border-radius: 50%; height:40px;width:40px;"></button>

<button class="glyphicon glyphicon-off" type="submit" onclick="return enableController(value);" value=" ${data.id}" 
style="background:Green; color:white; border-radius: 50%; height:40px;width:40px;"></button>

`);
    }
}

function deleteController(id) {
    let bool = confirm("Удалить контроллер?");
    if (bool) {
        $.ajax({
            type: "DELETE",
            url: '/api/controllers/' + id + '/',
            contentType: "application/json; charset=utf-8",
            success: function() {
                console.log("Контроллер удален.");
            },
            complete: function () {
                tableIO.ajax.reload();
            },
            error: function(e) {
                console.log("ERROR : ", e);
                alert("Контроллер используется устройством.");
            }
        });
    }
}

function enableController(id) {
    $.ajax({
        type: "PATCH",
        url: '/api/controllers/' + id + '/',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function(errMsg) {
            console.log(errMsg);
        },
        complete: function (data) {
            tableIO.ajax.reload();
            tableDev.ajax.reload();
        }
    });
}

function clearDeviceListIO() {
    $("#io-list > .cconf").empty();
}

function requestDeviceListIO() {
    clearDeviceListIO();
    resetPagingPageNumber("#io-list");
    nextView("#io-list");
}