{% load static %}

{% load icons_tags %}
{% load smart_settings_tags %}

{% smart_setting "FORMS_SHOW_DROPZONE_SUBMIT_BUTTON" as setting_forms_show_dropzone_submit_button %}

<script src="{% static 'mayan_forms/node_modules/dropzone/dist/dropzone.js' %}" type="text/javascript"></script>

<script src="{% url 'locales:javascript_catalog' 'mayan.apps.forms' %}" type="text/javascript"></script>

{% icons_get_icon "mayan.apps.forms.icons.icon_dropzone_fail" extra_context__html_data__class="text-danger" as icon_dropzone_fail %}
{% icons_get_icon "mayan.apps.forms.icons.icon_dropzone_file" as icon_dropzone_file %}
{% icons_get_icon "mayan.apps.forms.icons.icon_dropzone_ok" extra_context__html_data__class="text-success" as icon_dropzone_ok %}
{% icons_get_icon "mayan.apps.forms.icons.icon_dropzone_upload" as icon_dropzone_upload %}

<script>
    'use strict';

    const messageCancelUpload = gettext('Cancel upload');
    const messageCancelUploadConfirmation = gettext('Are you sure you want to cancel this upload?');
    const messageDefaultMessage = gettext('Drop files or click here to upload files');
    const messageFallbackMessage = gettext('Your browser does not support drag and drop file uploads.');
    const messageFallbackText = gettext('Please use the fallback form below to upload your files.');
    const messageRemoveFile = gettext('Clear');
    const messageResponseError = gettext('Server responded with {{statusCode}} code.');
    const paramName = 'source-file'

    Dropzone.autoDiscover = false;

    $('#ajax-content').on('updated', function (event) {
        const $dropzone = $('.dropzone');
        const $dropzoneForm = $dropzone.parents('form')[0];
        const $fileField = $('#id_' + paramName);
        const previewTemplate = document.querySelector('#previewTemplate').innerHTML;

        if ($dropzoneForm) {
            // Hide the forms file field and its div parent.
            $fileField.addClass('hidden');
            $fileField.parent().addClass('hidden');

            $dropzone.not('.dz-clickable').dropzone({
                addRemoveLinks: true,
                createImageThumbnails: false,
                dictCancelUpload: messageCancelUpload,
                dictCancelUploadConfirmation: messageCancelUploadConfirmation,
                dictDefaultMessage: '{% spaceless %}{{ icon_dropzone_upload }}{% endspaceless %} ' + messageDefaultMessage,
                dictFallbackMessage: messageFallbackMessage,
                dictFallbackText: messageFallbackText,
                dictRemoveFile: messageRemoveFile,
                dictResponseError: messageResponseError,
                init: function() {
                    const dropzoneInstance = this;

                    dropzoneInstance.on('sending', function(file, xhr, formData) {
                        const $dropzone = $(this.element);
                        const $dropzoneForm = $(
                            $dropzone.parents('form')[0]
                        );

                        $dropzoneForm.serializeArray().forEach(
                            function(element) {
                                formData.append(
                                    element.name, element.value
                                )
                            }
                        )
                    });

                    {% if setting_forms_show_dropzone_submit_button %}
                        dropzoneInstance.options.autoProcessQueue=false;
                        dropzoneInstance.element.closest('form').querySelector('button[type=submit').addEventListener('click', function(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            dropzoneInstance.processQueue();
                        });
                    {% endif %}
                },
                maxFilesize: null,
                paramName: paramName,
                previewTemplate: previewTemplate,
                timeout: 1200000,
                url: $dropzoneForm.action
            });
        }
    });
</script>

<script type="text/x-template" id="previewTemplate">
    <div class="dz-preview dz-file-preview">
        {{ icon_dropzone_file }}
        <div class="dz-details">
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>
            <img data-dz-thumbnail />
        </div>

        <div class="dz-progress">
            <span class="dz-upload" data-dz-uploadprogress>
                <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"></div>
            </span>
        </div>

        <div class="dz-success-mark">
            <span>
                {{ icon_dropzone_ok }}
            </span>
        </div>
        <div class="dz-error-mark">
            <span>
               {{ icon_dropzone_fail }}
            </span>
        </div>
        <div class="dz-error-message">
            <span data-dz-errormessage>
            </span>
        </div>
    </div>
</script>
