let tableHandlers;
let collapsedGroupsHandlerTable = {};
let sortGroupTable = ["System Group", "Scanners Group", "Camera Group", "Pallet Group", "Marker Group"];

HTMLImports.whenReady(function () {
    if ( $.fn.dataTable.isDataTable( '#handlerTable' ) ) {
        tableHandlers = $('#handlerTable').DataTable();
    }
    else {
        tableHandlers = $('#handlerTable').DataTable( {
            paging: true,
            retrieve: true,
            searching: true,
            ajax: {
                url: '/api/handlers/',
                dataSrc: ''
            },
            order: [[0, 'asc']],
            orderFixed: [ 0, 'asc' ],
            drawCallback: function ( settings ) {
                let api = this.api();
                let rows = api.rows( {page:'current'} ).nodes();
                let last=null;
                api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                    let collapsed = !!collapsedGroupsHandlerTable[group];
                    $(rows).eq( i ).css({ display: !collapsed ? 'none' : '' });
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            $('<tr/>').addClass("group-start")
                                .append('<td colspan="5">' + group + '</td>')
                                .attr('data-name', group)
                                .toggleClass('collapsed', !collapsed)
                        );
                        last = group;
                    }
                } );
            },
            columns: [
                { data: 'groupNameLocalized',
                  render: function (data, type, row, meta) {
                      if (type === 'sort') {
                          if (sortGroupTable.findIndex(el => el === row.groupName) === -1) sortGroupTable.push(row.groupName);
                          return sortGroupTable.findIndex(el => el === row.groupName);
                      }
                      return data;
                  }  
                },
                { data: 'typeEventLocalized' },
                { data: 'eventNameLocalized' },
                { data: null,
                    render: function (data, type) {
                        let opts = $("<div/>");
                        data.actions.forEach(elem => {
                            let opt = $(`<span>${elem.controller} [${elem.typeLocalized}]</span>`)
                            if (elem.controller === "Отсутсвует") $(opt).addClass('ERROR');
                            opts.append(opt);
                        });
                        return opts.html();
                    }
                },
                { "defaultContent": "&nbsp;"}
            ],
            autoWidth: false,
            columnDefs: [
                { width: '20%', targets: 0 },
                { width: '20%', targets: 1 },
                { width: '20%', targets: 2 },
                { width: '35%', targets: 3 },
                { width: '5%', targets: 4 }
            ],
            "createdRow": createdRowHandlerTable,
            "lengthMenu": [ [-1, 10, 25, 50], ["Все", 10, 25, 50] ],
            "language": {
                "search":         "Поиск:",
                "lengthMenu":     "Показывать _MENU_ строк",
                "info":           "Строки с _START_ по _END_ из _TOTAL_",
                "paginate": {
                    "next":       "Следущая",
                    "previous":   "Предыдущая"
                }
            }
        } );
    }
    $('#handlerTable tbody').on('click', 'tr.group-start', function () {
        let name = $(this).data('name');
        collapsedGroupsHandlerTable[name] = !collapsedGroupsHandlerTable[name];
        tableHandlers.draw(false);
    });
});

function reloadHandlerList() {
    tableHandlers.ajax.reload();
}

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

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

}

function deleteHandler(id, type) {
    $.ajax({
        type: "DELETE",
        url: '/api/handlers/' + id + '?type=' + type,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            console.log("success deleteHandler");
        },
        error: function(errMsg) {
            console.log(errMsg);
        },
        complete: function (data) {
            tableHandlers.ajax.reload();
        }
    });
}

function clearHandlerListNewContainer() {
    $("#handler-list-page > .cconf").empty();
}

function requestHandlerList() {
    clearHandlerListNewContainer() ;
    resetPagingPageNumber("#handler-list-page");
    nextView("#handler-list-page");
}