let tableDev;

HTMLImports.whenReady(function () {
    if ( $.fn.dataTable.isDataTable( '#deviceTable' ) ) {
        tableDev = $('#deviceTable').DataTable();
    }
    else {
        tableDev = $('#deviceTable').DataTable( {
            order: [[ 6, "asc" ]],
            paging: true,
            retrieve: true,
            searching: true,
            ajax: {
                url: '/api/devices/',
                dataSrc: ''
            },
            columns: [
                { data: 'deviceName'},
                { data: 'deviceType' },
                { data: 'deviceClass' },
                { data: 'description' },
                { data: 'ipAddress' },
                { data: 'port' },
                { data: null,
                    render: function (data, type) {
                    let status;
                    if (data.status != null) {
                        let st1 = `<button id="${data.id}" class="glyphicon glyphicon-refresh" type="submit" onclick="startSelfTestOneDevice('${data.deviceName}');disableButton('${data.id}')" value=" ${data.id}"
                                style="background:green; color:white; border-radius: 50%; height:40px;width:40px;"></button>`;
                        let st2 = `<i id="${data.id}_" style="color: ${data.status.color}">${data.status.statusRus}</i>`;
                        if (data.status.statusEng === 'ERROR' || data.status.statusEng === 'WARNING') {
                            let st2err = `<i onclick="showError('${data.id}');" id="${data.id}_" style="color: ${data.status.color}">${data.status.statusRus}</i>`;
                            status = st1 + st2err + `<div id="${data.id}_0" style="color: ${data.status.color}" hidden>${data.status.statusDesc}</div>`;
                            return status;
                        }
                        status = st1 + st2;
                        return status;
                    }
                    return "ОТКЛЮЧЕНО";
                    } },
                { "defaultContent": "&nbsp;"}
            ],
            autoWidth: false,
            columnDefs: [
                { width: '10%', targets: 0 },
                { width: '15%', targets: 1 },
                { width: '10%', targets: 2 },
                { width: '25%', targets: 3 },
                { width: '10%', targets: 4 },
                { width: '5%', targets: 5 },
                { width: '15%', targets: 6 },
                { width: '10%', targets: 7 }
            ],
            "createdRow": createdRowTable1,
            "lengthMenu": [ [-1, 10, 25, 50], ["Все", 10, 25, 50] ],
            "language": {
                "search":         "Поиск:",
                "lengthMenu":     "Показывать _MENU_ строк",
                "info":           "Строки с _START_ по _END_ из _TOTAL_",
                "paginate": {
                    "next":       "Следущая",
                    "previous":   "Предыдущая"
                }
            }
        } );
    }
});

function createdRowTable1( row, data, dataIndex, cells ) {
    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).css('color', 'grey');
        $('td:eq(6)', row).css('color', 'grey');
        $('td:eq(7)', row).html(
            `<button class="glyphicon glyphicon-trash" type="submit" onclick="deleteDevice(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="editDevice(value);" value=" ${data.id}" 
style="background:orange; color:white; border-radius: 50%; height:40px;width:40px;"></button>

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

<button class="glyphicon glyphicon-off" type="submit" onclick="enableDevice(value, '${data.deviceName}');" value=" ${data.id}"     
style="background:grey; color:white; border-radius: 50%; height:40px;width:40px;"></button>
`);
    } else {
        $('td:eq(7)', row).html(
            `<button class="glyphicon glyphicon-trash" type="submit" onclick="deleteDevice(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="editDevice(value);" value=" ${data.id}" 
style="background:orange; color:white; border-radius: 50%; height:40px;width:40px;"></button>

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

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

function deleteDevice(id) {
    let bool = confirm("Удалить устройство?");
    if (bool) {
        $.ajax({
            type: "DELETE",
            url: '/api/devices/' + id + '/',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                console.log("success deleteDevice");
            },
            error: function(errMsg) {
                console.log(errMsg);
            },
            complete: function (data) {
                tableDev.ajax.reload();
                tableHandlers.ajax.reload();
            }
        });
    }
}

function enableDevice(id, name) {
    $.ajax({
        type: "PATCH",
        url: '/api/devices/' + id + '/',
        contentType: "application/json; charset=utf-8",
        success: function () {
            startSelfTestOneDevice(name);
        },
        error: function(errMsg) {
            console.log(errMsg);
            alert("Контроллер устройства выключен. Устройство не может быть активировано.")
        },
        complete: function (data) {
            tableDev.ajax.reload();
        }
    });
}

function clearDeviceListNewContainer() {
    $("#device-list-new-page > .cconf").empty();
}

function requestDeviceListNew() {
    clearDeviceListNewContainer();
    resetPagingPageNumber("#device-list-new-page");
    nextView("#device-list-new-page");
}

function showError(id) {
    let elem = $('#' + id + '_0');
    let isHidden = elem[0].hidden;
    if (isHidden) {
        elem.show("slow");
        elem[0].hidden = false;
    } else {
        elem.hide("slow");
        elem[0].hidden = true;
    }
}