<style>
    input.attachment {
        display: none;
    }

    .uv-element-block .uv-added-attachment {
        color: #333333;
        margin: -14px 5px;
    }
</style>

<script type="text/javascript">
    $(function () {
        var FileView = Backbone.View.extend({
            fileCounter: 0,
            max_post_size: {{ max_post_size }},
            max_file_uploads: {{ max_file_uploads }},
            upload_max_filesize: {{ upload_max_filesize }},
            el: '.attachment-block',
            events : {
                'click .uv-file-label': 'createFileType',
                'change .attachment': 'selectFile',
                'click .uv-added-attachment span': 'removeFile',
                'click .uv-field-message': 'removeError',
            },
            createFileType: function(e) {
                this.removeError(e)
                var currentElement = Backbone.$(e.currentTarget),
                    attachmentBlock = currentElement.parents('.attachment-block')
                if (attachmentBlock.children('.uv-added-attachment').length + 1 > this.max_file_uploads) {
                    attachmentBlock.append(this.getDefaultErrorMessage())
                    return;
                }
                this.fileCounter += 1;
                attachmentBlock.append('<div class="uv-added-attachment" style="display: none" id="file-' + this.fileCounter + '"><div class="uv-attachment"><input type="file" name="attachments[]" class="attachment" multiple="multiple"></div></div>')
                $('#file-' + this.fileCounter).find('.attachment').trigger('click')
            },
            labelTemplate: _.template('<div data-name="<%- fileName %>" class="uv-selected-attachment-item"><span></span><label class="file-name"><%- fileName %></label></div>'),
            selectFile: function(e) {
                var currentElement = Backbone.$(e.currentTarget);
                var attachmentBlock = currentElement.parents(".uv-added-attachment");
                var isError = false;
                
                if (currentElement.length) {
                    files = currentElement[0].files; 

                    if (files.length) {
                        for (var i = 0; i < files.length; i++) {
                            var fileName = files[i].name;
                            if (files[i].size > this.upload_max_filesize) {
                                isError = true;
                                break;
                            }

                            // Validating Form Size
                            var formSize = 0
                            var formData = new FormData(currentElement.parents('form')[0])
                            
                            for (var pair of formData.entries()) {
                                if (pair[1] instanceof Blob) {
                                    formSize += pair[1].size
                                } else {
                                    formSize += pair[1].length
                                }
                            }

                            if (formSize > this.max_post_size) {
                                isError = true
                            }

                            attachmentBlock.append(this.labelTemplate({
                                'fileName': fileName
                            }));
                        }
                    }
                }
                
                if (isError) {
                    attachmentBlock.parents('.attachment-block').append(this.getDefaultErrorMessage())
                    attachmentBlock.remove()
                    return
                }

                attachmentBlock.show()
            },
            removeFile: function(e) {
                this.removeError(e);
                let el = $(e.currentTarget).parent('.uv-selected-attachment-item');
                let inputEl = el.siblings('.uv-attachment').find('input');
                
                let fileCount = $("input[name='attachments[]']")[0].files.length;
                if (fileCount > 1) {
                    console.log(fileCount);
                    let fileName = el.data('name');
                    let files = inputEl[0].files; 
                    let dt = new DataTransfer();

                    for (let i = 0; i < files.length; i++) {
                        let file = files[i];
                        if (el.data('name') != files[i].name) {
                            dt.items.add(file);
                        }
                    }

                    $("input[name='attachments[]']")[0].files = dt.files;
                    el.remove();

                    if ($("input[name='attachments[]']")[0].files.length == 0) {
                        $('.uv-added-attachment').remove();
                    }
                }

                Backbone.$(e.currentTarget).parents('.uv-added-attachment').remove();
            },
            getDefaultErrorMessage: function() {
                return '<span class="uv-field-message">You can send up to ' + Math.floor(this.upload_max_filesize/(1024*1024)) + ' MB in attachments. If you have more than one attachment, they can\'t add up to more than ' + Math.floor(this.max_post_size/(1024*1024))  + ' MB and ' + this.max_file_uploads + ' attachments in total.</span>'
            },
            removeError: function(e) {
                Backbone.$(e.currentTarget).parents('.attachment-block').find('.uv-field-message').remove()
            }   
        });
        
        var fileView = new FileView();
    });
</script>