let tableProperty;
let collapsedGroupsPropertyTable = {};
let sortGroupTableProperty = ["BASE", "MANUAL", "PACK", "PALLET", "MARKER", "OTHER"];

HTMLImports.whenReady(function () {
    if ( $.fn.dataTable.isDataTable( '#example' ) ) {
        tableProperty = $('#example').DataTable();
    }
    else {
        tableProperty = $('#example').DataTable( {
            paging: true,
            retrieve: true,
            searching: true,
            ajax: {
                url: '/api/settings/properties',
                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 = !!collapsedGroupsPropertyTable[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: 'groupLocalized',
                    render: function (data, type, row, meta) {
                        if (type === 'sort') {
                            if (sortGroupTableProperty.findIndex(el => el === row.group) === -1) sortGroupTableProperty.push(row.group);
                            return sortGroupTableProperty.findIndex(el => el === row.group);
                        }
                        return data;
                    }
                },
                { data: 'key'},
                { data: 'value' },
                { data: 'location' },
                { data: 'description' },
                { "defaultContent": "&nbsp;"}
                ],
            autoWidth: false,
            columnDefs: [
                { visible: false, targets: 0 },
                { width: '15%', targets: 1 },
                { width: '20%', targets: 2 },
                { width: '10%', targets: 3 },
                { width: '45%', targets: 4 },
                { width: '10%', targets: 5 }
            ],
            "createdRow": createdRowTable,
            "lengthMenu": [ [-1, 10, 25, 50], ["Все", 10, 25, 50] ],
            "language": {
                "search":         "Поиск:",
                "lengthMenu":     "Показывать _MENU_ строк",
                "info":           "Строки с _START_ по _END_ из _TOTAL_",
                "paginate": {
                    "next":       "Следущая",
                    "previous":   "Предыдущая"
                }
            }
        } );
    }
    $('#example tbody').on('click', 'tr.group-start', function () {
        let name = $(this).data('name');
        collapsedGroupsPropertyTable[name] = !collapsedGroupsPropertyTable[name];
        tableProperty.draw(false);
    });
});

function reloadPropertyList() {
    tableProperty.ajax.reload();
}

function createdRowTable( row, data, dataIndex, cells ) {
    let inputVal = getFieldsType(data);
    $('td:eq(1)', row).html(inputVal);
    if ( data.location === "system_properties" ) {
        $('td:eq(4)', row).html(`<button type="submit" onclick="return setDefault(value);" value="${escapeHtml(data.key)}" style="background:orange; color:white">СБРОСИТЬ</button>`);
    }
}

//исключить символы при заполнении поля типа NUMBER: 69  = "e", 109 = "-", 107 = "+"
function getFieldsType(data) {
    if (data.key === "replication.dbname" || data.key === "replication.password" || data.key === "replication.port" || data.key === "replication.user") {
        return `<input type="${data.fieldType}" onchange="setUserValue(id, value);" id="${data.key}" value="${data.value}" disabled/>`
    }
    if (data.fieldType === "NUMBER") {
        return `<input type="${data.fieldType}" onkeydown="return event.keyCode !== 69 && event.keyCode !== 109 && event.keyCode !== 107" 
               onchange="setUserValue(id, value);" id="${data.key}" value="${data.value}"/>`
    }
    if  (data.fieldType === "STRING") {
        return `<input type="${data.fieldType}" onchange="setUserValue(id, value);" id="${data.key}" value="${data.value}"/>`
    }
    if (data.fieldType === "ENUM") {
        let arr = data.allowedValues.split(',');
        let opts = "";
        for (let i = 0; i < arr.length; i++) {
            if (arr[i]!==data.value) {
                opts = opts + "<option>" + arr[i] + "</option>";
            }
        }
        return `<select onchange="setUserValue(id, name);" id="${data.key}" name="${data.value}" style="width: 100%;height: 26px; color: #0d0d0d">
                                        <option selected>${data.value}</option> + ${opts} + 
                                        </select>`
    }
    if (data.fieldType === "BOOLEAN" || data.value === "true" || data.value === "false") {
        let secondOpt = "true";
        if (data.value === "true") {secondOpt = "false";}
        return `<select onchange="setUserValue(id, name);" id="${data.key}" name="${data.value}" style="width: 100%;height: 26px; color: #0d0d0d" >
                                        <option selected>${data.value}</option>
                                        <option>${secondOpt}</option>
                                        </select>`;
    }
    return `<input type="text" onchange="setUserValue(id, value);" id="${data.key}" value="${data.value}"/>`;
}

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

function requestPropertyList() {
    clearPropertyListContainer();
    resetPagingPageNumber("#property-list-page");
    nextView("#property-list-page");
}
    
function setUserValue(id, value) {
    console.log("START setUserValue");
    let queryId = id.replace(/\./g, "\\.");
    let elem = $("#" + queryId);
    value = elem.children("option:selected").val();
    if (value === undefined) {
        value = elem.val();
    }
        $.ajax({
            type: "POST",
            url: '/api/settings/properties',
            data: JSON.stringify({"key": id, "value": value, "description": "@standart"}),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function(errMsg) {
                console.log(errMsg);
            },
            complete: function (data) {
                $("#button-reload-settings").css('color','green');
                tableProperty.ajax.reload();
            }
        });
    }    
    
function setDefault(key) {
        console.log("start setDefault(key)");
        console.log(key);
        $.ajax({
            type: "DELETE",
            url: '/api/settings/properties/' + key + '/',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(rersponse) {
                console.log(rersponse);
            },
            error: function(errMsg) {
                console.log(errMsg);
            },
            complete: function (data) {
                $("#button-reload-settings").css('color','green');
                tableProperty.ajax.reload();
            }
        });
    }
    
function applySettings() {
    setTimeout(() => {
        $.ajax({
        type: "POST",
        url: '/api/system/restart',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function(errMsg) {
            console.log(errMsg);
        }
    }); }, 2000);
}

function saveProperty() {
    let key = document.getElementById("input1").value;
    let value = document.getElementById("input2").value;
    let description = document.getElementById("input3").value;

    $.ajax({
        type: "POST",
        url: '/api/settings/properties',
        data: JSON.stringify({"key": key, "value": value, "description": description}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success:  resetForm(),
        complete: function () {
            $("#button-reload-settings").css('color','green');
            tableProperty.ajax.reload();
            customHistory.back();
        },
        error: function(errMsg) {
            console.log(errMsg);
        }
    });
}