let DevPropTable;

function fillDevicePropertyTable(id) {
    HTMLImports.whenReady(function () {
        if ( $.fn.dataTable.isDataTable( '#deviceProperty' ) ) {
            DevPropTable = $('#deviceProperty').DataTable();
        }
        else {
            DevPropTable = $('#deviceProperty').DataTable( {
                paging: true,
                retrieve: true,
                searching: true,
                ajax: {
                    url: `/api/devices/${id}/properties/`,
                    dataSrc: ''
                },
                columns: [
                    {data: null,
                        render: function (data, type) {
                            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 (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>"}
                                }
                                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: 'devicePropertyDescription'
                    },
                    {data: 'devicePropertyKey',
                        render: function (data, type) {
                            return `<button id="button-del-dev-prop" 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":   "Предыдущая"
                    }
                }
            } );
        }
    });
    $('#deviceProperty').DataTable().ajax.url(`/api/devices/${id}/properties/`).load();
    // DevPropTable.ajax.reload();
}

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

function requestDeviceProperty() {
    clearDevicePropertyContainer();
    resetPagingPageNumber("#device-property-page");
    nextView("#device-property-page");
}

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

$('#deviceProperty')
    .on('change', 'input', changeInputFieldHandler).on('change', 'select', changeInputFieldHandler)
    .on('input', 'input[type="number"]', function() {
    if ($(this).val() === '') {
        $(this).val(this.defaultValue)
    }
});

function changeInputFieldHandler(e) {
    let inputField = $(e.target);
    let table = inputField.closest("#deviceProperty").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;
    }
    cell.data(oldValue);
}