Dropzone.autoDiscover = false;
var vueDropzone = Vue.component('vuedropzone',{
    template: '<div :id="id" ref="dropzoneElement" :class="{ \'vue-dropzone dropzone\': includeStyling }">' +
        '<div v-if="useCustomSlot" class="dz-message">' +
        '<slot> <h3 class="dropzone-custom-title">Drag and drop to upload content!</h3>' +
        '<div class="subtitle">...or click to select a file from your computer</div></slot>' +
        '</div>' +
        '</div>',

    props: {
        id: {
            type: String,
            required: true,
            default: "dropzone"
        },
        options: {
            type: Object,
            required: true
        },
        includeStyling: {
            type: Boolean,
            default: true,
            required: false
        },
        awss3: {
            type: Object,
            required: false,
            default: null
        },
        destroyDropzone: {
            type: Boolean,
            default: true,
            required: false
        },
        duplicateCheck: {
            type: Boolean,
            default: false,
            required: false
        },
        useCustomSlot: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            isS3: false,
            isS3OverridesServerPropagation: false,
            wasQueueAutoProcess: true
        };
    },
    computed: {
        dropzoneSettings() {
            let defaultValues = {
                thumbnailWidth: 200,
                thumbnailHeight: 200
            };
            Object.keys(this.options).forEach(function (key) {
                defaultValues[key] = this.options[key];
            }, this);

            return defaultValues;
        }
    },
    mounted() {
        if (this.$isServer && this.hasBeenMounted) {
            return;
        }
        this.hasBeenMounted = true;

        this.dropzone = new Dropzone(
            this.$refs.dropzoneElement,
            this.dropzoneSettings
        );

        let vm = this;

        this.dropzone.on("thumbnail", function (file, dataUrl) {
            vm.$emit("vdropzone-thumbnail", file, dataUrl);
        });

        this.dropzone.on("addedfile", function (file) {
            var isDuplicate = false;
            if (vm.duplicateCheck) {
                if (this.files.length) {
                    var _i, _len;
                    for (
                        _i = 0, _len = this.files.length;
                        _i < _len - 1;
                        _i++ // -1 to exclude current file
                    ) {
                        if (
                            this.files[_i].name === file.name &&
                            this.files[_i].size === file.size &&
                            this.files[_i].lastModifiedDate.toString() ===
                            file.lastModifiedDate.toString()
                        ) {
                            this.removeFile(file);
                            isDuplicate = true;
                            vm.$emit("vdropzone-duplicate-file", file);
                        }
                    }
                }
            }

            vm.$emit("vdropzone-file-added", file);

        });

        this.dropzone.on("addedfiles", function (files) {
            vm.$emit("vdropzone-files-added", files);
        });

        this.dropzone.on("removedfile", function (file) {
            vm.$emit("vdropzone-removed-file", file);
            if (file.manuallyAdded && vm.dropzone.options.maxFiles !== null)
                vm.dropzone.options.maxFiles++;
        });

        this.dropzone.on("success", function (file, response) {
            vm.$emit("vdropzone-success", file, response);

        });

        this.dropzone.on("successmultiple", function (file, response) {
            vm.$emit("vdropzone-success-multiple", file, response);
        });

        this.dropzone.on("error", function (file, message, xhr) {
            vm.$emit("vdropzone-error", file, message, xhr);
            if (this.isS3) vm.$emit("vdropzone-s3-upload-error");
        });

        this.dropzone.on("errormultiple", function (files, message, xhr) {
            vm.$emit("vdropzone-error-multiple", files, message, xhr);
        });

        this.dropzone.on("sending", function (file, xhr, formData) {
            vm.$emit("vdropzone-sending", file, xhr, formData);
        });

        this.dropzone.on("sendingmultiple", function (file, xhr, formData) {
            vm.$emit("vdropzone-sending-multiple", file, xhr, formData);
        });

        this.dropzone.on("complete", function (file) {
            vm.$emit("vdropzone-complete", file);
        });

        this.dropzone.on("completemultiple", function (files) {
            vm.$emit("vdropzone-complete-multiple", files);
        });

        this.dropzone.on("canceled", function (file) {
            vm.$emit("vdropzone-canceled", file);
        });

        this.dropzone.on("canceledmultiple", function (files) {
            vm.$emit("vdropzone-canceled-multiple", files);
        });

        this.dropzone.on("maxfilesreached", function (files) {
            vm.$emit("vdropzone-max-files-reached", files);
        });

        this.dropzone.on("maxfilesexceeded", function (file) {
            vm.$emit("vdropzone-max-files-exceeded", file);
        });

        this.dropzone.on("processing", function (file) {
            vm.$emit("vdropzone-processing", file);
        });

        this.dropzone.on("processingmultiple", function (files) {
            vm.$emit("vdropzone-processing-multiple", files);
        });

        this.dropzone.on("uploadprogress", function (file, progress, bytesSent) {
            vm.$emit("vdropzone-upload-progress", file, progress, bytesSent);
        });

        this.dropzone.on("totaluploadprogress", function (
            totaluploadprogress,
            totalBytes,
            totalBytesSent
        ) {
            vm.$emit(
                "vdropzone-total-upload-progress",
                totaluploadprogress,
                totalBytes,
                totalBytesSent
            );
        });

        this.dropzone.on("reset", function () {
            vm.$emit("vdropzone-reset");
        });

        this.dropzone.on("queuecomplete", function () {
            vm.$emit("vdropzone-queue-complete");
        });

        this.dropzone.on("drop", function (event) {
            vm.$emit("vdropzone-drop", event);
        });

        this.dropzone.on("dragstart", function (event) {
            vm.$emit("vdropzone-drag-start", event);
        });

        this.dropzone.on("dragend", function (event) {
            vm.$emit("vdropzone-drag-end", event);
        });

        this.dropzone.on("dragenter", function (event) {
            vm.$emit("vdropzone-drag-enter", event);
        });

        this.dropzone.on("dragover", function (event) {
            vm.$emit("vdropzone-drag-over", event);
        });

        this.dropzone.on("dragleave", function (event) {
            vm.$emit("vdropzone-drag-leave", event);
        });

        vm.$emit("vdropzone-mounted");
    },
    beforeDestroy() {
        if (this.destroyDropzone) this.dropzone.destroy();
    },
    methods: {
        manuallyAddFile: function (file, fileUrl) {
            file.manuallyAdded = true;
            this.dropzone.emit("addedfile", file);
            let containsImageFileType = false;
            if (
                fileUrl.indexOf(".svg") > -1 ||
                fileUrl.indexOf(".png") > -1 ||
                fileUrl.indexOf(".jpg") > -1 ||
                fileUrl.indexOf(".jpeg") > -1 ||
                fileUrl.indexOf(".gif") > -1 ||
                fileUrl.indexOf(".webp") > -1
            )
                containsImageFileType = true;
            if (
                this.dropzone.options.createImageThumbnails &&
                containsImageFileType &&
                file.size <= this.dropzone.options.maxThumbnailFilesize * 1024 * 1024
            ) {
                fileUrl && this.dropzone.emit("thumbnail", file, fileUrl);

                var thumbnails = file.previewElement.querySelectorAll(
                    "[data-dz-thumbnail]"
                );
                for (var i = 0; i < thumbnails.length; i++) {
                    thumbnails[i].style.width =
                        this.dropzoneSettings.thumbnailWidth + "px";
                    thumbnails[i].style.height =
                        this.dropzoneSettings.thumbnailHeight + "px";
                    thumbnails[i].style["object-fit"] = "contain";
                }
            }
            this.dropzone.emit("complete", file);
            if (this.dropzone.options.maxFiles) this.dropzone.options.maxFiles--;
            this.dropzone.files.push(file);
            this.$emit("vdropzone-file-added-manually", file);
        },
        setOption: function (option, value) {
            this.dropzone.options[option] = value;
        },
        removeAllFiles: function (bool) {
            this.dropzone.removeAllFiles(bool);
        },
        processQueue: function () {
            let dropzoneEle = this.dropzone;
            this.dropzone.processQueue();
            this.dropzone.on("success", function () {
                dropzoneEle.options.autoProcessQueue = true;
            });
            this.dropzone.on("queuecomplete", function () {
                dropzoneEle.options.autoProcessQueue = false;
            });
        },
        init: function () {
            return this.dropzone.init();
        },
        destroy: function () {
            return this.dropzone.destroy();
        },
        updateTotalUploadProgress: function () {
            return this.dropzone.updateTotalUploadProgress();
        },
        getFallbackForm: function () {
            return this.dropzone.getFallbackForm();
        },
        getExistingFallback: function () {
            return this.dropzone.getExistingFallback();
        },
        setupEventListeners: function () {
            return this.dropzone.setupEventListeners();
        },
        removeEventListeners: function () {
            return this.dropzone.removeEventListeners();
        },
        disable: function () {
            return this.dropzone.disable();
        },
        enable: function () {
            return this.dropzone.enable();
        },
        filesize: function (size) {
            return this.dropzone.filesize(size);
        },
        accept: function (file, done) {
            return this.dropzone.accept(file, done);
        },
        addFile: function (file) {
            return this.dropzone.addFile(file);
        },
        removeFile: function (file) {
            this.dropzone.removeFile(file);
        },
        getAcceptedFiles: function () {
            return this.dropzone.getAcceptedFiles();
        },
        getRejectedFiles: function () {
            return this.dropzone.getRejectedFiles();
        },
        getFilesWithStatus: function () {
            return this.dropzone.getFilesWithStatus();
        },
        getQueuedFiles: function () {
            return this.dropzone.getQueuedFiles();
        },
        getUploadingFiles: function () {
            return this.dropzone.getUploadingFiles();
        },
        getAddedFiles: function () {
            return this.dropzone.getAddedFiles();
        },
        getActiveFiles: function () {
            return this.dropzone.getActiveFiles();
        }
    }

});