let DevPropTableNew;

function fillDevicePropertyTableNew(className) {
    HTMLImports.whenReady(function () {
        if ($.fn.dataTable.isDataTable('#devicePropertyNew')) {
            DevPropTableNew = $('#devicePropertyNew').DataTable();
        } else {
            DevPropTableNew = $('#devicePropertyNew').DataTable({
                paging: true,
                retrieve: true,
                searching: true,
                ajax: {
                    url: '/api/refs/device/properties/required?className=' + className,
                    dataSrc: ''
                },
                columns: [
                    {
                        data: null,
                        render: function (data, type) {
                            if (checkIpPort(data)) return null;
                            if (data.devicePropertyDescription === "ПОЛЬЗОВАТЕЛЬСКОЕ ПОЛЕ") {
                                return `<input type="text" value="${data.devicePropertyKey}"/>`
                            }
                            return `<input type="text" value="${data.devicePropertyKey}" disabled="disabled"/>`
                        }
                    },
                    {
                        data: null,
                        render: function (data, type) {
                            if (checkIpPort(data)) return null;
                            if (data.devicePropertyType === "boolean") {
                                let secondOpt = "true";
                                if (data.devicePropertyValue === "true") {
                                    secondOpt = "false";
                                }
                                return `<select style="width: 100%;height: 26px; color: #0d0d0d" >
                                        <option selected>${data.devicePropertyValue}</option>
                                        <option>${secondOpt}</option>
                                        </select>`
                            }
                            if (data.devicePropertyType === "enum") {
                                let val = data.devicePropertyValue;
                                let opts = "";
                                let arr = data.devicePropertyEnums.split(',');
                                for (let i = 0; i < arr.length; i++) {
                                    if (arr[i] !== val) {
                                        opts = opts + "<option>" + arr[i] + "</option>"
                                    }
                                }
                                if (data.devicePropertyValue === "true") {
                                    secondOpt = "false";
                                }
                                return `<select style="width: 100%;height: 26px; color: #0d0d0d">
                                        <option selected>${data.devicePropertyValue}</option> + ${opts} + 
                                        </select>`
                            }
                            if (data.devicePropertyType === "date") {
                                return `<input type="datetime-local" value="${data.devicePropertyValue}"/>`
                            }
                            return `<input type="${data.devicePropertyType}" value="${data.devicePropertyValue}"/>`
                        }
                    },
                    {
                        data: null,
                        render: function (data, type) {
                            if (checkIpPort(data)) return null;
                            return data.devicePropertyDescription;
                        }
                    },
                    {
                        data: null,
                        render: function (data, type) {
                            if (checkIpPort(data)) return null;
                            return `<button id="button-del-dev-prop-new" type="submit"  value=" ${data.devicePropertyKey}" style="background:orange; color:white">УДАЛИТЬ</button>`
                        }
                    }
                ],
                autoWidth: false,
                columnDefs: [
                    {width: '30%', targets: 0},
                    {width: '30%', targets: 1},
                    {width: '34%', targets: 2},
                    {width: '6%', targets: 3}
                ],
                "lengthMenu": [[-1, 10, 25, 50], ["Все", 10, 25, 50]],
                "language": {
                    "search": "Поиск:",
                    "lengthMenu": "Показывать _MENU_ строк",
                    "info": "Строки с _START_ по _END_ из _TOTAL_",
                    "paginate": {
                        "next": "Следущая",
                        "previous": "Предыдущая"
                    }
                }
            });
        }
    });
    getAllProperty(className);
    $('#devicePropertyNew').DataTable().ajax.url('/api/refs/device/properties/required?className=' + className).load();
    // DevPropTableNew.ajax.reload();
}

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

function requestDevicePropertyNew() {
    clearDevicePropertyContainerNew();
    resetPagingPageNumber("#device-property-new-page");
    nextView("#device-property-new-page");
}

$('#devicePropertyNew tbody').on('click', '#button-del-dev-prop-new', function () {
    DevPropTableNew
        .row($(this).parents('tr'))
        .remove()
        .draw();
});

$('#devicePropertyNew').on('change', 'input', changeInputFieldHandler).on('change', 'select', changeInputFieldHandler);

function changeInputFieldHandler(e) {
    let inputField = $(e.target);
    let table = inputField.closest("#devicePropertyNew").DataTable().table();
    let row = table.row(inputField.parents('tr'));
    let cell = table.cell(inputField.parents('td, th'));
    let newValue = inputField.val();
    let oldValue = cell.data();
    console.log("cell= ", cell);
    console.log("oldValue= ", oldValue);
    console.log("newValue= ", newValue);
    let arrCell = cell[0];
    let column = arrCell[0].column;
    if (column === 0) {
        oldValue.devicePropertyKey = newValue;
    } else {
        oldValue.devicePropertyValue = newValue;
    }
    oldValue.devicePropertyValue = newValue;
    cell.data(oldValue);
}

function checkIpPort(data) {
    if (data.devicePropertyKey === 'host') {
        $('#ip').val(data.devicePropertyValue);
        return true;
    } else if (data.devicePropertyKey === 'port') {
        $('#port').val(data.devicePropertyValue);
        return true;
    }
    return false;
}