let tableDev;

const groupTranslations = {
    "MARKER": "Группа маркировки",
    "SCANNER": "Группа сканирования",
    "PACK": "Группа агрегирования",
    "PALLET": "Группа палетирования",
    "SYSTEM": "Система",
    "DEFAULT": "По умолчанию"
};

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

function toggleDropdown() {
    let dropdown = document.getElementById("groupDropdown");
    if (dropdown.style.display === "none" || dropdown.style.display === "") {
        dropdown.style.display = "block";
    } else {
        dropdown.style.display = "none";
    }
}

document.addEventListener('click', function(event) {
    let dropdown = document.getElementById("groupDropdown");
    let customDropdown = document.querySelector('.custom-dropdown');
    
    if (customDropdown && !customDropdown.contains(event.target)) {
        dropdown.style.display = "none";
    }
});

function populateGroupFilter() {
    let groups = new Set();
    tableDev.rows().every(function () {
        let data = this.data();
        let translatedGroup = groupTranslations[data.groupName] || data.groupName;
        groups.add(translatedGroup);
    });
    let groupFilter = document.getElementById("groupFilter");
    groupFilter.innerHTML = '<option value="">Все группы</option>';
    groups.forEach(group => {
        let option = document.createElement('option');
        option.value = group;
        option.textContent = group;
        groupFilter.appendChild(option);
    });
}
function updateHeader(select) {
    let selectedValue = select.value;
    filterTableByGroup(selectedValue);
}
function filterTableByGroup(selectedGroup) {
    tableDev.column(0).search(selectedGroup).draw();
}
$(document).ready(function () {
    createAndReloadTableDevice();
    setTimeout(populateGroupFilter, 1000);
});

function reloadTableDevice() {
    console.log("reload-Device")
    createAndReloadTableDevice();
}

if (tableDev) {
    tableDev.off('draw').on('draw', function () {
        populateGroupDropdown();
    });
}

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).css('color', 'grey');
        $('td:eq(8)', row).css('display', 'flex');
        $('td:eq(8)', row).css('flex-direction', 'column');

        $('td:eq(8)', row).html(
            `<button class="glyphicon glyphicon-pencil" type="submit" onclick="editDevice(value);" value=" ${data.id}" 
style="background:orange; color:white; height:60px; border-radius:4px"></button>
<button class="glyphicon glyphicon-off" type="submit" onclick="enableDevice(value, '${data.deviceName}');" value=" ${data.id}"     
style="background:grey; color:white;  height:60px; border-radius:4px"></button>
`);
    } else {
        $('td:eq(8)', row).css('display', 'flex');
        $('td:eq(8)', row).css('flex-direction', 'column');
        $('td:eq(8)', row).html(
            `<button class="glyphicon glyphicon-pencil" type="submit" onclick="editDevice(value);" value=" ${data.id}" 
style="background:orange; color:white; height:60px; border-radius:4px"></button>
<button class="glyphicon glyphicon-off" type="submit" onclick="enableDevice(value, '${data.deviceName}');" value=" ${data.id}" 
style="background:green; color:white; height:60px; border-radius:4px"></button>
`);
    }
}

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) {
            reloadTableDevice();
        }
    });
}

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;
    }
}

function updateDeviceStatus(device) {
    if (tableDev) {
        let row = tableDev.row((idx, rowdata) => rowdata.deviceName === device.name);
        if (row.length > 0) {
            let data = row.data();
            data.status = {
                statusEng: device.status,
                statusRus: device.localizedStatus,
                statusDesc: device.statusDesc
            };
            row.data(data).draw();
        }
    }
}