let HandlerActionTable;
let mapControllers = {}

function fillHandlerActionTable(id) {
    if (id === undefined) {id = -1}
    let getRequest = '/api/refs/handler/actions?' +
        'group=' + $('#groupHandler').val()
        + '&type=' + $('#typeHandler').val()
        + '&name=' + $('#nameHandler').val()
        + '&id=' + id;

    fillMapControllers();
        if ($.fn.dataTable.isDataTable('#handlerActions')) {
            HandlerActionTable = $('#handlerActions').DataTable();
        } else {
            HandlerActionTable = $('#handlerActions').DataTable({
                paging: true,
                retrieve: true,
                searching: true,
                ajax: {
                    url: getRequest,
                    dataSrc: ''
                },
                columns: [
                    {
                        data: null,
                        render: function (data) {
                            let select = $("<select id=\"selectController\" style=\"width: 100%;height: 26px; color: #0d0d0d\" />");
                            data.allowedControllers.forEach(allowed => $("<option />", {value: allowed, text: allowed}).appendTo(select));
                            if (data.allowedControllers.findIndex(item => item === data.controller) === -1) $('<option />', {value: data.controller, text: data.controller}).appendTo(select);
                            select.find(`option[value="${data.controller}"]`).attr('selected','selected');
                            if (data.controller === "Отсутсвует") {
                                select.addClass("background-red");
                                select.find(`option[value="${data.controller}"]`).addClass("background-red");
                            }
                            return $("<div />").append(select).html();
                        }
                    },
                    {
                        data: null,
                        render: function (data) {
                            let selectedType = data.type;
                            let options = `<option value="${selectedType}" selected>${data.typeLocalized}</option>`
                            if (data.allowedTypes) {
                                for (let i = 0; i < data.allowedTypes.length; i++) {
                                    let optionVal = data.allowedTypes[i];
                                    if (optionVal.type !== selectedType) {
                                        options = options + `<option value="${optionVal.type}">${optionVal.typeLocalized}</option>`;
                                    }
                                }
                            }
                            return `<select id="selectType" style="width: 100%;height: 26px; color: #0d0d0d">` + options + `</select>`;
                        }
                    },
                    {
                        data: null,
                        render: function (data, type) {
                            return `<button id="button-del-handler-action" type="submit"  value=" ${data.controller}" style="background:orange; color:white">УДАЛИТЬ</button>`
                        }
                    }
                ],
                autoWidth: false,
                columnDefs: [
                    {width: '33%', targets: 0},
                    {width: '33%', targets: 1},
                    {width: '34%', targets: 2}
                ],
                "lengthMenu": [[-1, 10, 25, 50], ["Все", 10, 25, 50]],
                "language": {
                    "search": "Поиск:",
                    "lengthMenu": "Показывать _MENU_ строк",
                    "info": "Строки с _START_ по _END_ из _TOTAL_",
                    "paginate": {
                        "next": "Следущая",
                        "previous": "Предыдущая"
                    }
                }
            });
        }
   $('#handlerActions').DataTable().ajax.url(getRequest).load();
}

function requestHandlerActions() {
    resetPagingPageNumber("#handler-actions-page");
    nextView("#handler-actions-page");
}

$('#handlerActions tbody').on('click', '#button-del-handler-action', function () {
    HandlerActionTable
        .row($(this).parents('tr'))
        .remove()
        .draw();
});

$('#handlerActions').on('change', '#selectController', changeInputFieldController).on('change', '#selectType', changeInputFieldType);

function changeInputFieldType(e) {
    let inputField = $(e.target);
    let table = inputField.closest("#handlerActions").DataTable().table();
    let cell = table.cell(inputField.parents('td, th'));
    let newValue = inputField.val();
    let oldValue = cell.data();
    let arrCell = cell[0];
    let column = arrCell[0].column;
    if (column === 1) {
        oldValue.type = newValue;
        oldValue.typeLocalized = getLocalizedTypeForNewType(oldValue, newValue);
    }
    cell.data(oldValue);
}

function getLocalizedTypeForNewType(oldValue, newValue) {
    let typeLocal;
    let arr = oldValue.allowedTypes;
    for (let i = 0; i < arr.length; i++) {
        if (newValue === arr[i].type) {
            typeLocal = arr[i].typeLocalized;
        }
    }
    return typeLocal;
}

function changeInputFieldController(e) {
    let inputField = $(e.target);
    let table = inputField.closest("#handlerActions").DataTable().table();
    let cell = table.cell(inputField.parents('td, th'));
    let newValue = inputField.val();
    let oldValue = cell.data();
    let arrCell = cell[0];
    let column = arrCell[0].column;
    if (newValue === 'Отсутсвует') {
        inputField.addClass('background-red')
    } else {
        inputField.removeClass('background-red')
    }
    arrCell[0].column = column + 1;
    oldValue.controller = newValue;
    oldValue.allowedTypes = mapControllers[newValue];
    let indexValue = mapControllers[newValue].findIndex(el => el.type === oldValue.type);
    if (indexValue === -1) indexValue = 0;
    oldValue.type = mapControllers[newValue][indexValue].type;
    oldValue.typeLocalized = mapControllers[newValue][indexValue].typeLocalized;
    cell.data(oldValue);
}

function fillMapControllers() {
    $.ajax({
        type: "GET",
        url: '/api/refs/handler/controllers?' + 'group=',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            for (let i = 0; i < data.length; i++) {
                mapControllers[data[i].controller] = data[i].allowedTypes;
            }
        },
        error: function(errMsg) {
            console.log(errMsg);
        }
    });
}