// --------------------------------------------------------------------------------------
// клик по первой скрепке для отображения полочки с файлами
//
function showFileBar(b, select_file_on_first_empty_slot = true)
{
    $form = $(b).closest("form");
    $filebar = $form.find(".filebar");
    //console.log($filebar);
    //$fileBar.data("select_file_on_first_empty_slot", select_file_on_first_empty_slot);
    $filebar.show();
    if ($filebar.is(":visible")) $(b).hide();

    getFilebarSlot($filebar[0]);
}

// --------------------------------------------------------------------------------------
// подгрузить ещё один слот, если нет пустых
//
function getFilebarSlot(fb)
{
    $filebar = $(fb);
    $form = $filebar.closest("form");

    // поиск пустого слота (скрепки) - вдруг есть свободный
    $freeSlots = $filebar.find('.slot.empty');
    if ($freeSlots.length > 0) return;

    var files_cnt = $filebar.data("files-count");
    file_n = files_cnt + 1;

    var select_file_on_first_empty_slot = $filebar.data("select_file_on_first_empty_slot");

    $.ajax({
        type: "POST",
        url: '/topic/getFilebarSlot',
        data: {
            FILE_N:   file_n
        },
        success: function(response) {
            var jsonResponse = JSON.parse(response);
            if (jsonResponse.success == "1") {

                $filebar = $(fb);
                //console.log($filebar)

                $(jsonResponse.data).appendTo($filebar.find("tr:last"));
                $filebar.data("files-count", file_n);

                if (file_n == 1 && select_file_on_first_empty_slot) { // это клик по первой скрепке, сразу откроем диалог выбора файла
                    $filebar.find('.slot.empty:first').find(".input-file:first").click();
                }

            } else {
                console.log('Error: ' + response);
            }
        }
   });

   return false;
}

// --------------------------------------------------------------------------------------
// файл выбран - загрузить его на сервер и получить миниатюру "thumb"
//
function fileSelected(input)
{
    $inputFile = $(input);

    $slot    = $inputFile.closest(".slot");
    $fileBar = $slot.closest(".filebar");
    $form    = $fileBar.closest("form");

    file_n = $slot.data("file-n");

    $('body').css('cursor', 'progress');

    var formData = new FormData();
    formData.append('FILE', $inputFile[0].files[0]);

    $.ajax({
        type: "POST",
        url: '/topic/uploadFile',
        contentType: false,
        processData: false,
        data: formData,
        success: function(response) {
            $('body').css('cursor', 'default');

            var jsonResponse = JSON.parse(response);
            if (jsonResponse.success == "1") {

                var data = JSON.parse(jsonResponse.data);

                $slot.find('.thumb').prop("src", data.thumb_url);
                $slot.data("filename", data.filename).removeClass("empty").addClass("selected");

                $("#lastError").html("").hide();

                getFilebarSlot($fileBar[0]);

            } else {
                $("#lastError").html(jsonResponse.data).show();
            }
        }
   });
   return false;
}

// --------------------------------------------------------------------------------------
// клик по картинке в файл-баре - открыть модальное окно-вьювер с просмотром оригинала картинки
//
function clickThumb(thumb)
{
    $thumb   = $(thumb);

    url = $thumb.prop("src");
    url = url.replace("_thumb", "");
    url = url.replace("_preview", "");

    $slot       = $thumb.closest(".slot");
    $fileBar    = $slot.closest(".filebar");

    file_n   = $slot.data("file-n");
    filename = $slot.data("filename");

    $form = $fileBar.closest("form"); // формы может и не быть
    title = $form[0] == undefined ? url : '[IMG_' + file_n + ']';

    if (filename) {
        var modal = $modal({
            title: title,
            content: '<img class="image-viewer" src="' + url + '" />',
          });
          modal.show();
    } else {
        $inputFile  = $slot.find(".input-file:first");
        $inputFile.click();
    }
}

// --------------------------------------------------------------------------------------
// клик по картинке в тексте сообщения - открыть модальное окно-вьювер с просмотром оригинала картинки
//
function clickPreview(imgPreview)
{
    $imgPreview   = $(imgPreview);

    url = $imgPreview.prop("src");
    url = url.replace("_preview", "");

    var modal = $modal({
        title: url,
        content: '<img class="image-viewer" src="' + url + '" />',
    });

    modal.show();
}


// --------------------------------------------------------------------------------------
// клик по номеру файла вставляет [IMG_N] в текст сообщения, где N - номер файла, начиная с 1
//
function clickFileN(btn)
{
    $slot = $(btn).closest('.slot');
    file_n = $slot.data("file-n");

    $inputFile = $slot.find(".input-file").first();

    if ($slot.data("filename")) {
        $form = $slot.closest("form");
        $mt = $form.find('.message-text').first();
        text = $.trim($mt.val());
        $mt.val((text ? text + ' ' : '') + '[IMG_' + file_n + '] ');
        $mt.focus();
    } else {
        $inputFile.click();
    }
}

// --------------------------------------------------------------------------------------
// удалить файл, значит сделать слот для файла свободным (показать скрепку)
//
function deleteFile(btn)
{
    $slot = $(btn).closest('.slot');
    $slot.data("filename", "").removeClass("selected").addClass("empty");

    $slot.find('.thumb').prop("src", "/css/img/scrap.png");
}

// --------------------------------------------------------------------------------------
// вернуть fileBar в исходное состояние
//
function resetFileBar(fb)
{
    $filebar = $(fb);
    $filebar.data("files-count",0).hide();
    $filebar.find("tr:first").html("");

    $form = $filebar.closest("form");
    $form.find("#buttonShowFilebar").show();
}

// --------------------------------------------------------------------------------------
// добавить список файлов в FormData
//
function attachFiles(formData, filebar)
{
    $fileBar = $(filebar);

    var files_cnt = $fileBar.data("files-count");
    formData.append("FILES_COUNT", files_cnt);

    if (files_cnt == 0) return;

    FILES = [];

    $slots = $fileBar.find('.slot').each(function (i, element) {

        $slot = $(element);
        filename = $slot.data("filename");
        file_n   = $slot.data("file-n");

        if (filename !== "" && typeof filename !== 'undefined') {
            FILES.push({
                "file_n":file_n,
                "filename":filename
            });
        }
    });

    if (FILES.length > 0) {
        formData.append('FILES', JSON.stringify(FILES));
    }
}

// --------------------------------------------------------------------------------------
// вставка картинок из буфера обмена
//
document.onpaste = async event => {
    const item = Array.from(event.clipboardData.items).filter(item => item.kind === 'file')[0];
    if (item === undefined) return;
//    document.querySelector('form .filebar').dataset.filesCount = 1;   // костыльное решение - отключить диалог выбора файла
    showFileBar(document.getElementById('buttonShowFilebar'), false); // false - отключить диалог выбора файла
    const fakeInput = document.createElement('span');
    fakeInput.files = [ item.getAsFile() ];

    const slot = document.querySelector('.slot.empty') ?? await new Promise(resolve => {
        const observer = new MutationObserver(record => {
            observer.disconnect();
            resolve(record[0].addedNodes[0]);
        })

        const fileBar = document.querySelector('form .filebar');
        observer.observe(fileBar, { childList: true, subtree: true });
    })

    slot.append(fakeInput);
    fileSelected(fakeInput);
}