const put_button = document.querySelector("#files3d");
const drop_zone = document.querySelectorAll('#drop-zone');        
const maxFileSize = 1200000; // максимальный размер фалйа - 1 мб.
const upload_buttons = document.querySelectorAll(".files");
const thumb_gallery_container = document.querySelector(".thumb-gallery .itc-slider-items");
const button_prev = document.querySelector(".itc-slider-btn-prev");
const button_next = document.querySelector(".itc-slider-btn-next");
var photos_array = [];
// Проверка поддержки браузером
if (typeof(window.FileReader) == 'undefined') {
    drop_zone.lastElementChild.innerHTML ='Не поддерживается браузером!';
}
for (var i = 0; i < upload_buttons.length; i++){
    drop_zone[i].addEventListener("dragover", function(e){
        e.preventDefault();
        return false;
    });
    drop_zone[i].addEventListener("drop", function(e){
        e.preventDefault();
        console.log(this.parentElement.lastElementChild.id);
        this.parentElement.lastElementChild.files = e.dataTransfer.files;
        addImage(e, this);
        loadDropZone(e, this);
    });
}  
//Есть второй обработчик для files в goods_change.js
for (var i = 0; i < upload_buttons.length; i++){
    // кнопка загрузки картинок
    upload_buttons[i].addEventListener("change", function(e){
        addImage(e, this);
        loadDropZone(e, this.parentElement.firstElementChild);
    });
}  
function loadDropZone(e, obj, icon){  
    if(e.dataTransfer){
        var file = e.dataTransfer.files;          
    }
    else{
        var file = document.getElementById("files").files;
    }
    // Проверяем размер файла
    if (file.size > maxFileSize) {
        obj.lastElementChild.innerHTML ='Файл слишком большой!';
        return false;
    }
    obj.parentElement.querySelector('.progress div').parentElement.style.display = "block";
    obj.firstElementChild.style.display = "none";
    obj.parentElement.querySelector('.drop-zone-text').style.visibility = "hidden";                

    var formData = new FormData();
    formData.append("files[]", file);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e){uploadProgress(e, obj)}, false);
    xhr.onreadystatechange = function(e){stateChange(e, obj)};
    xhr.open('POST', 'drop.php');
    xhr.send(formData);
}
// Показываем процент загрузки
function uploadProgress(e, obj) {
    var percent = parseInt(e.loaded / e.total * 100);
    obj.parentElement.querySelector('.progress div').style.width = percent + '%';
}

function stateChange(e, obj) {
    if (e.target.readyState == 4) {
        if (e.target.status == 200) {
            obj.parentElement.querySelector('.progress div').parentElement.style.display = "none";
            obj.firstElementChild.style.display = "block"; 
            obj.parentElement.querySelector('.drop-zone-text').style.visibility = "visible"; 
        } else {
            obj.lastElementChild.innerHTML ='Произошла ошибка!';
        }
    }
}
function addField(obj) {
    for(var i = 0; i < 2; i++){
        var field = document.createElement("input");
        field.classList.add("design-fields");
        obj.previousElementSibling.appendChild(field);
    }
}
function addImage(e, obj){
    if(e.dataTransfer){
        var files = event.dataTransfer.files;          
    }
    else{
        var files = obj.files;
    }    

    var files_array = Array.from(files);
    var totalfiles = files.length;
    if(totalfiles > 0 ){
        for (var index = 0; index < totalfiles; index++) {
            var icon_container = document.createElement("div");
            icon_container.classList.add("itc-slider-item");             
            thumb_gallery_container.appendChild(icon_container);          
            var icon = document.createElement("div");
            icon.classList.add("thumb-gallery-item", "thumb-gallery-temp-item");
            icon.id = Date.now() + index;

            photos_array[icon.id] = files_array[index];

            icon.style.backgroundImage = "url(" + URL.createObjectURL(files[index]) + ")";
            icon_container.appendChild(icon);
            var close_button = document.createElement("div");
            close_button.classList.add("close-button");
            icon.appendChild(close_button);
            close_button.addEventListener("click", function(){
                delete photos_array[this.parentElement.id];
                this.parentElement.remove();                   
            });                                
        }
    }
    button_prev.style.display = "block";
    button_next.style.display = "block"; 
    ItcSlider.getOrCreateInstance('.thumb-gallery');
    button_prev.click();    
}