import Dropzone from "../lib/dropzone"

// Disable auto discover
Dropzone.autoDiscover = false;

const DropzoneHandler = {

    dropzones: [],

    defaultSettings: {
        maxFilesize: 2, // MB
        maxFiles: 1,
        acceptedFiles: 'image/*',
        addRemoveLinks: true
    },


    init: function () {

        DropzoneHandler.dropzones = document.querySelectorAll('.form.dropzone');

        const dropzoneAmount = DropzoneHandler.dropzones.length;

        for(let i = 0; i < dropzoneAmount; i++){
            DropzoneHandler.createDropzone(DropzoneHandler.dropzones[i]);
        }
    },

    createDropzone: function (node) {

        const settings = DropzoneHandler.defaultSettings;
        settings.url = node.getAttribute('action');

        if(isset(node.getAttribute('data-placeholder-text'))) settings.dictDefaultMessage = node.getAttribute('data-placeholder-text');
        if(isset(node.getAttribute('data-dictFileTooBig'))) settings.dictFileTooBig = node.getAttribute('data-dictFileTooBig');
        if(isset(node.getAttribute('data-dictMaxFilesExceeded'))) settings.dictMaxFilesExceeded = node.getAttribute('data-dictMaxFilesExceeded');
        if(isset(node.getAttribute('data-max-images'))){
            let maxFiles = parseInt(node.getAttribute('data-max-images'));
            settings.maxFiles = maxFiles;
        }

        const dropzone = new Dropzone(node, settings);

        dropzone.deleteRoute = node.getAttribute('data-delete');

        dropzone.on('removedfile', function (file) {

            let imageId = file.name;
            imageId = imageId.replace('image-', '');

            // Send post request to delete the file
            DropzoneHandler.deleteFile(imageId, dropzone);

            // Determine if the max file limit is greater then 0
            dropzone.options.maxFiles = dropzone.options.maxFiles + 1;
            if(dropzone.options.maxFiles >= 1) node.classList.remove('dz-max-files-reached');
        });



        const images = node.querySelectorAll('var.image');
        const imageAmount = images.length;

        for(let i = 0; i < imageAmount; i++){
            const image = images[i];

            let mockImage = {name: "image-" + image.getAttribute('data-image-id') , size: 12345};

            // Call the default addedfile event handler
            dropzone.emit("addedfile", mockImage);

            // And optionally show the thumbnail of the file:
            dropzone.emit("thumbnail", mockImage, image.getAttribute('data-image-url'));

            // Make sure that there is no progress bar, etc...
            dropzone.emit("complete", mockImage);

            // Determine if the max file limit is 0
            dropzone.options.maxFiles = dropzone.options.maxFiles - 1;
            if(dropzone.options.maxFiles === 0) node.classList.add('dz-max-files-reached');
        }

    },

    deleteFile: function (id, dropzone) {

        // Create new XHR Object
        let request = new XMLHttpRequest();
        request.open('POST', dropzone.deleteRoute);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // bind our event listener to the "load" event.
        // "load" is fired when the response to our request is completed and without error.
        request.onreadystatechange = function() {
            if (this.readyState === 4) {
                if (this.status >= 200 && this.status < 400) {
                    // Success!
                    var resp = this.responseText;

                } else {
                    // Error :(
                    console.log('Something went wrong...');
                }
            }
        };

        request.send('imageId='+id);
        request = null;

    }
};

export default DropzoneHandler;