document.addEventListener("DOMContentLoaded", function () {
    const inputFields = document.querySelectorAll("input[data-input-filter][data-err-msg]");
    inputFields.forEach(function (inputField) {
        setInputFilter(inputField);
    });
});

function setTableScrollableHeight() {
    var windowHeight = window.innerHeight;
    var pageTopbarHeight = $('#page-topbar').height();
    $('.table-scrollable').css('height', windowHeight - 80 - pageTopbarHeight + 'px');
}

window.onload = function () {
    setTableScrollableHeight();
};

window.onresize = function () {
    setTableScrollableHeight();
};

function scrollTopTable() {
    $('#lazy-table').find('tbody').scrollTop(0);
}

var defaultSettings = {
    resource: "base/items",
    SELECT: "getData",
    sortBy: "id",
    sortDirection: "asc",
    searchString: "",
    has_img: "",
    id: "",
    img_md5: "",
    itemLabel: "",
    itemName: "",
    itemDamage: "",
    nbt_hash: "",
    itemmaxSize: "",
    offset: 0,
    limit: 50,
    isLoading: false,
    isEndOfList: false,
    totalRows: 0,
    searchReturnEmpty: false
}

var settings = Object.assign({}, defaultSettings);

// функция для обновления списка товаров на странице
function updateItemList(data) {
    var tbody = $('tbody')
    tbody.html(data);
}


function clearInputsValues() {
    // Отчистка всех поисковых полей при загрузки страницы
    var list = document.getElementsByClassName('input_search');
    var n;
    for (n = 0; n < list.length; ++n) {
        list[n].value = '';
    }

    // Получаем все элементы select, содержащие 'select_search_' в своем class
    var selects = document.querySelectorAll('select[class*="select_search_"]');
    // Перебираем все полученные элементы select и сбрасываем их в стандартное значение
    for (var i = 0; i < selects.length; i++) {
        selects[i].value = ""; //ставлю пустое значение или же что значит NaN
    }
}

clearInputsValues()

// выполнение запроса при загрузке страницы
sendHttpRequest('GET', settings, null, function (status, data) {
    if (status === 'ERROR') {
        console.error(data);
    } else {
        updateItemList(data.html)
    }
});

function clearAllFilters() {
    clearInputsValues()
    settings = Object.assign({}, defaultSettings);
    // Удаляем классы arrow-up и arrow-down у всех заголовков столбцов
    $(".sortable i").removeClass("mdi-arrow-up-bold mdi-arrow-down-bold test-success");
    sendHttpRequest('GET', settings, null, function (status, data) {
        if (status === 'ERROR') {
            console.error(data);
        } else {
            updateItemList(data.html);
            scrollTopTable()
            settings.totalRows = parseInt(data.totalRows);
            settings.offset += settings.limit;
            if (settings.offset >= settings.totalRows) {
                settings.isEndOfList = true;
            }
        }
    });
}


$('.input_search, .select_search').on('keydown change', function (event) {
    // Проверяем, была ли нажата клавиша Enter
    if (event.type === 'keydown' && event.keyCode !== 13) {
        return;
    }
    // Отменяем стандартное поведение браузера при нажатии Enter в поле ввода
    event.preventDefault();

    // Получаем класс текущего элемента и извлекаем тип настройки из класса
    var className = $(this).attr('class');
    var settingType = className.substring(className.indexOf('_search_') + '_search_'.length);

    // Обновляем значение свойства объекта settings соответствующее типу настройки
    var selectedValue = $(this).val();
    settings[settingType] = selectedValue;

    // Сброс параметров поиска и выполнение запроса на сервер
    settings.offset = 0;
    settings.limit = 50;
    settings.isLoading = false;
    settings.isEndOfList = false;
    settings.totalRows = 0;

    sendHttpRequest('GET', settings, null, function (status, data) {
        if (status === 'ERROR') {
            console.error(data);
        } else {
            if (data.totalRows === 0 && data.html === "") {
                settings.searchReturnEmpty = true
                var messageRow = `
            <tr class="td-search404" style = "background-color: inherit; pointer-events: none;">
              <td colspan="8" style="pointer-events: none; border:0;">
                <span class="warning fs-4 fw-light text-muted d-flex justify-content-center mt-5 h-100">
                  <i class="fa fa-exclamation-triangle mt-2 me-2"></i> Ничего не найдено!
                </span>
              </td>
            </tr>`;
                $('tbody').html(messageRow);
            } else {
                settings.searchReturnEmpty = false
                updateItemList(data.html);
                settings.totalRows = parseInt(data.totalRows);
                settings.offset += settings.limit;
                if (settings.offset >= settings.totalRows) {
                    settings.isEndOfList = true;
                }
            }
        }
    });
});


$('#lazy-table').find('tbody').on('scroll', function () {
    var containerHeight = $(this).height();
    var scrollTop = $(this).scrollTop();
    var contentHeight = $(this).find('tr').length * $(this).find('tr:first').height();

    // Если пользователь долистал до конца контента и запрос не отправляется в текущий момент
    if (containerHeight + scrollTop >= contentHeight && !settings.isLoading && !settings.isEndOfList) {
        settings.isLoading = true; // Устанавливаем флаг isLoading в значение true

        settings.offset += settings.limit; // Корректируем значение offset
        settings.limit = defaultSettings.limit; // Задаем новое значение limit

        // Отправляем запрос на сервер
        sendHttpRequest('GET', settings, null, function (status, data) {
            settings.isLoading = false; // Сбрасываем флаг isLoading в значение false после получения ответа от сервера

            if (status === 'ERROR') {
                console.error(data);
            } else {
                // Добавляем полученные данные в таблицу
                $('#lazy-table tbody').append(data.html);

                // Обновляем значение totalRows
                settings.totalRows = parseInt(data.totalRows);

                // Проверяем, что были добавлены новые элементы и не достигнут конец списка
                if ($('#lazy-table tbody tr').length === 0 || settings.offset >= settings.totalRows) {
                    settings.isEndOfList = true; // Устанавливаем флаг isEndOfList в значение true, если все данные уже были получены
                }
            }
        });
    }
});

function sendSortRequest(sortBy, element) {
    if (settings.searchReturnEmpty) {
        return
    }

    settings.offset = 0;
    settings.limit = 50;
    settings.isLoading = false;
    settings.isEndOfList = false;
    settings.totalRows = 0;

    // Определяем направление сортировки
    var sortDirection = "asc";
    if (sortBy === settings.sortBy && settings.sortDirection === "asc") {
        sortDirection = "desc";
    }

    // Обновляем значения параметров settings перед отправкой запроса на сервер
    settings.sortBy = sortBy;
    settings.sortDirection = sortDirection;

    // Удаляем классы arrow-up и arrow-down у всех заголовков столбцов
    $(".sortable i").removeClass("mdi-arrow-up-bold mdi-arrow-down-bold test-success");

    // Добавляем или обновляем иконку внутри i-элемента для текущего заголовка столбца
    var icon = $(element).find("i");

    if (sortDirection === "asc") {
        icon.attr("class", "mdi mdi-arrow-up-bold");
    } else {
        icon.attr("class", "mdi mdi-arrow-down-bold");
    }

    sendHttpRequest('GET', settings, null, function (status, data) {
        if (status === 'ERROR') {
            console.error(data);
        } else {
            updateItemList(data.html);

            // Обновляем значения параметров settings после получения новых данных
            settings.totalRows = parseInt(data.totalRows);
            settings.offset += settings.limit;
            if (settings.offset >= settings.totalRows) {
                settings.isEndOfList = true;
            }
            // Устанавливаем скролл в самый верх
            scrollTopTable()
        }
    });
}


function editRow(button) {
    const row = button.closest('tr[id*="row-"]');
    const id = row.id.split('-')[1];

    const modal = document.createElement('div');
    modal.classList.add('modal', 'fade');
    modal.setAttribute('tabindex', '-1');
    modal.setAttribute('role', 'dialog');
    modal.setAttribute('aria-hidden', 'true');

    const modalContent = document.createElement('div');
    modalContent.classList.add('modal-dialog', 'modal-dialog-centered');
    modalContent.setAttribute('role', 'document');

    const modalContentWrapper = document.createElement('div');
    modalContentWrapper.classList.add('modal-content');

    const modalHeader = document.createElement('div');
    modalHeader.classList.add('modal-header');
    const modalTitle = document.createElement('h5');
    modalTitle.classList.add('modal-title');
    modalTitle.textContent = 'Редактирование строки';
    modalHeader.appendChild(modalTitle);
    const closeButton = document.createElement('button');
    closeButton.classList.add('btn-close');
    closeButton.setAttribute('type', 'button');
    closeButton.setAttribute('data-bs-dismiss', 'modal');
    closeButton.setAttribute('aria-label', 'Close');
    modalHeader.appendChild(closeButton);

    modalContentWrapper.appendChild(modalHeader);
    const modalBody = document.createElement('div');
    modalBody.classList.add('modal-body');

    const thead = document.querySelector('thead');
    const inputsRow = thead.querySelector('tr:nth-child(2)');
    Array.from(row.cells).forEach((cell, index) => {
        const inputCell = inputsRow.cells[index];
        const inputElement = inputCell.querySelector('input,select');
        if (inputElement && !inputElement.hasAttribute('data-editor-disable')) {
            const inputType = inputElement.classList.toString().split(' ').filter(className => className.startsWith('input_search_') || className.startsWith('select_search_')).map(className => className.replace('input_search_', 'input_edit_').replace('select_search_', 'select_edit_')).join(' ');
            const label = thead.querySelector(`tr:first-child th:nth-child(${index + 1})`).textContent;
            const inputValue = inputElement.tagName === 'SELECT' ? inputElement.value : cell.textContent.trim();

            const formGroup = document.createElement('div');
            formGroup.classList.add('mb-3');
            const inputLabel = document.createElement('label');
            inputLabel.classList.add('form-label');
            inputLabel.textContent = label;
            let input;
            if (inputElement.tagName === 'SELECT') {
                input = document.createElement('select');
                Array.from(inputElement.options).forEach((option) => {
                    const newOption = document.createElement('option');
                    newOption.value = option.value;
                    newOption.text = option.text;
                    if (option.value === inputValue) {
                        newOption.selected = true;
                    }
                    input.appendChild(newOption);
                });
            } else {
                input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', inputValue);
                // Set data attributes
                input.setAttribute('data-input-filter', inputElement.getAttribute('data-input-filter'));
                input.setAttribute('data-err-msg', inputElement.getAttribute('data-err-msg'));
                // Apply input filter
                setInputFilter(input);
            }
            input.classList.add('form-control', inputType);

            formGroup.appendChild(inputLabel);
            formGroup.appendChild(input);
            modalBody.appendChild(formGroup);
        }
    });

    modalContentWrapper.appendChild(modalBody);

    const modalFooter = document.createElement('div');
    modalFooter.classList.add('modal-footer');
    const saveButton = document.createElement('button');
    saveButton.classList.add('btn', 'btn-primary');
    saveButton.textContent = 'Сохранить';

    saveButton.addEventListener('click', () => {
        const rowData = {};
        Array.from(modal.querySelectorAll('input,select')).forEach((input) => {
            const inputType = input.classList.toString().split(' ').find((className) => className.startsWith('input_edit_') || className.startsWith('select_edit_'));
            if (inputType) {
                const key = inputType.replace('input_edit_', '').replace('select_edit_', '');
                rowData[key] = input.tagName === 'SELECT' ? input.value : input.value.trim();
            }
        });
        sendHttpRequest(
            'UPDATE',
            `/api/?resource=${settings.resource}&id=${id}`,
            rowData,
            function (status, data) {
                if (status === 'ERROR') {
                    console.error(data);
                } else {
                    row.outerHTML = data;

                    // addRow(parseInt(id))
                    modal.remove();
                    bootstrapModal.hide();
                }
            }
        );
    });
    modalFooter.appendChild(saveButton);

    const cancelButton = document.createElement('button');
    cancelButton.classList.add('btn', 'btn-secondary');
    cancelButton.textContent = 'Отмена';
    cancelButton.setAttribute('type', 'button');
    cancelButton.setAttribute('data-bs-dismiss', 'modal');
    modalFooter.appendChild(cancelButton);

    modalContentWrapper.appendChild(modalFooter);
    modalContent.appendChild(modalContentWrapper);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);

    const bootstrapModal = new bootstrap.Modal(modal);
    $(modal).on('hidden.bs.modal', function () {
        addRow(parseInt(id));
    });
    bootstrapModal.show();

}

function addRow(element) {
    if (window.innerWidth > 600) { // добавляем проверку на ширину экрана
        return;
    }
    let rowId;
    var isObj = true;

    if (typeof element === 'object') {
        rowId = element.parentNode.id;
        var newRowId = `rowM-${rowId.slice(4)}`;
        const existingRow = document.getElementById(newRowId);
        if (existingRow) {
            existingRow.parentNode.removeChild(existingRow);
            return;
        }
        var trInnerHTML = element.parentNode.innerHTML;
    } else {
        isObj = false
        rowId = element;
        var newRowId = `rowM-${rowId}`;
        element = document.getElementById(`row-${rowId}`);
        var trInnerHTML = document.querySelector(`#row-${rowId}`).innerHTML;
    }

    const newRow = document.createElement('tr');
    newRow.id = newRowId;
    newRow.innerHTML = trInnerHTML;

    newRow.style.display = 'block';
    const newTds = newRow.querySelectorAll('td');
    const ths = document.getElementsByTagName('thead')[0].querySelectorAll('th');
    for (let i = 0; i < newTds.length; i++) {
        newTds[i].classList.add('td');

        const content = document.createTextNode(ths[i].textContent);
        const beforeElem = document.createElement('div');
        beforeElem.classList.add('th-content');
        beforeElem.appendChild(content);
        newTds[i].insertBefore(beforeElem, newTds[i].firstChild);

        newTds[i].style.display = 'block';
    }

    const tds = newRow.querySelectorAll('td.m-transform');
    for (let i = 0; i < tds.length; i++) {
        tds[i].parentNode.removeChild(tds[i]);
    }

    if (isObj) {
        element.parentNode.parentNode.insertBefore(newRow, element.parentNode.nextSibling);
    } else {
        const existingRow = document.getElementById(`rowM-${rowId}`);
        // Если существующий элемент найден, заменяем его на новый элемент
        if (existingRow) {
            existingRow.replaceWith(newRow);
        }
    }
}