import Dropzone from "dropzone";

let elementImage = document.querySelectorAll('.upload-image');
if (elementImage.length > 0) {
    elementImage.forEach(addDropzoneImage);
}
function addDropzoneImage(element) {
    let blockError = element.querySelector('.upload-image__error'),
        blockProgressBar = element.querySelector('.progress-wrapper'),
        progressBarText = blockProgressBar.querySelector('.upload-image__progressbar-text'),
        progressBar = blockProgressBar.querySelector('.progress-bar'),
        storageType = element.dataset.storageType,
        morph = element.dataset.morph,
        imageBlock = element.querySelector('.add-image');

    imageBlock.querySelector('button.add-image__remove').addEventListener('click', (e) => {
        element.querySelector('input.save').value = '';
        element.querySelector('input.delete').value = 1;
        imageBlock.style.display = 'none';
    });

    let myDropzone = new Dropzone(element.querySelector('button.upload-image__button'), {
        url: "/storage/image/upload-resize",
        uploadMultiple: false,
        parallelUploads: 1,
        maxFiles: 1,
        acceptedFiles: element.dataset.acceptedFiles,
        sending: function (file, response, formData) {
            blockError.textContent = '';
            blockError.style.display = 'none';
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
            formData.append('storage_type', storageType);
            formData.append('morph', morph);
            blockProgressBar.style.display = 'block';
        },
        thumbnail: function(file, dataUrl) {

        },
        addedfile: function(file) {

        },
        totaluploadprogress: function(progress) {
            progressBarText.textContent = progress + '%';
            progressBar.style.width = progress + '%';
            progressBar.setAttribute('aria-valuenow', progress);
        },
        complete: function(file) {
            this.removeFile(file);

            progressBarText.textContent = '0%';
            progressBar.style.width = '0%';
            progressBar.setAttribute('aria-valuenow', 0);
            blockProgressBar.style.display = 'none';
        },
        success: function (file, image) {
            imageBlock.querySelector('img').setAttribute('src', image.url);
            element.querySelector('input.save').value = image.id;
            element.querySelector('input.delete').value = 0;
            imageBlock.style.display = 'block';
        },
        error: function (file, response) {
            let message = '';

            if (response.errors) {
                for (let errorKey in response.errors) {
                    message += response.errors[errorKey] + '<br>'
                }
                if(response.message) {
                    message += response.message + '<br>'
                }
            } else if(response.message) {
                message += response.message + '<br>'
            } else {
                message += response + '<br>'
            }

            blockError.innerHTML = message;
            blockError.style.display = 'block';
        },
    });
}