<div id='widgetOptions_widgetOptions' class='widget container'>
    <div>
        <h3 class='title_widgetOptions'>File UpLoader</h3>
    </div>
    <div>
        <div class='note_widgetOptions note'>Allowed file extensions: <div class='fileTypeDisplay_widgetOptions'></div></div>
        <div class='note_widgetOptions note'>Maximum file size: <div class='maxFileSizeDisplay_widgetOptions'></div></div>
    </div>
    <div id='fileUpLoaderDiv_widgetOptions'></div>

    <!-- drop zone html used if widgetOptions.allowDragAndDropZone == true -->
    <div id='dropzone-external_widgetOptions' class='flex-box dx-theme-border-color'>
        <div id='dropzone-text_widgetOptions' class='flex-box'>
            <span>Drop file here</span>
            <span>…or click to browse.</span>
        </div>
        <div id='upload-progress_widgetOptions'></div>
    </div>

</div>

<script type='text/javascript'>
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    // ' Base Widget:  File_FileUploader.html
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    // ' Custom Widget Filename:
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    // ' (c) 2021 by Dovetail Internet Technologies, LLC
    // '              www.dovetailinternet.com
    // '              info@dovetailinternet.com
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    // ' All rights reserved. Not to be used without permission.
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    // ' Development Date: June 2021
    // ' Revision: 1.0
    // ' Modified: 06/10/2021 - PR
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    // ' Purpose: Create a portable and versatile file upload widget that can be instantiated multiple times on the same page.
    // '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

    var FileUploadList = [];

    $(function () {

        var allowedExtensionsForUploadArray = widgetOptions.allowedExtensionsForUpload.split(',');
        var allowedExtensions = buildFileTypesArray(allowedExtensionsForUploadArray);

        // update widget displays with widget info
        $('.maxFileSizeDisplay_widgetOptions').html((widgetOptions.maxFileSize / 1000000) + ' MB');
        $('.fileTypeDisplay_widgetOptions').html(buildDisplayString(allowedExtensions));
        $('.title_widgetOptions').html(widgetOptions.label);
        (widgetOptions.displayRules) ? $('note_widgetOptions').show() : $('.note_widgetOptions').hide();

        function buildDisplayString(someArray) {
            var html = '';
            someArray.forEach(function (item, i, someArray) {
                if (i % 5 == 0) {
                    if (i !== 0) { html += '</br>'; }
                }
                html += item + '  ';
            });
            return html;
        }

        function buildFileTypesArray(anArray) {
            var returnArray = [];
            if (anArray.length <= 0) {
                returnArray = ['.jpg', '.jpeg', '.gif', '.png', '.pdf']; // default file types
            }
            if (anArray.length > 0) {
                returnArray = anArray.map(item => item.replace(/\s/g, ''));
                returnArray = returnArray.map(function (item) {
                    if (item.startsWith('.')) {
                        return item;
                    }
                    if (!item.startsWith('.')) {
                        var newItem = '.' + item;
                        return newItem;
                    }
                })
            }
            return returnArray;
        }

        DisplayDropAndDragZone(widgetOptions.allowDragAndDropZone);

        function DisplayDropAndDragZone(allowDragAndDropZone) {
            // create class for widget
            var widgetClass = '.fileUpLoader_yesZone_widgetOptions';
            $('#fileUpLoaderDiv_widgetOptions').addClass('fileUpLoader_yesZone_widgetOptions');

            if (allowDragAndDropZone == true) {
                ///---------------- create widget with drag and Drop zone -----------------
                var fileUploader_yesZone = $(widgetClass).dxFileUploader({
                    dropZone: $(widgetOptions.dragAndDropZone),
                    invalidFileExtensionMessage: 'File type is not allowed',
                    labelText: 'or Drop file here',
                    uploadButtonText: 'Upload',
                    uploadUrl: FileUploadUtil(
                        widgetOptions.strObscureFilename,
                        widgetOptions.filePrefix,
                        widgetOptions.fileSuffix),
                    multiple: widgetOptions.allowMultipleFiles ?? true, // option
                    uploadMode: widgetOptions.uploadMode,
                    maxFileSize: widgetOptions.maxFileSize ?? 1500000,
                    dialogTrigger: '#dropzone-external_widgetOptions',
                    dropZone: '#dropzone-external_widgetOptions',
                    allowedFileExtensions: allowedExtensions,
                    visible: false,
                    onDropZoneEnter: function (e) {
                        if (e.dropZoneElement.id === 'dropzone-external_widgetOptions')
                            toggleDropZoneActive(e.dropZoneElement, true);
                    },
                    onDropZoneLeave: function (e) {
                        if (e.dropZoneElement.id === 'dropzone-external_widgetOptions')
                            toggleDropZoneActive(e.dropZoneElement, false);
                    },
                    onProgress: function (e) {
                        uploadProgressBar.option('value', e.bytesLoaded / e.bytesTotal * 100)
                    },
                    onUploadStarted: function () {
                        uploadProgressBar.option('visible', true);
                    },
                    onUploaded: function (e) {
                        var response = JSON.parse(e.request.responseText);
                        console.log('response');
                        console.log(response);
                        if (response.Result.Success) {
                            FileUploadList = response.Data.Files;
                            if (!widgetOptions.allowMultipleFiles) {
                                e.component.option('disabled', true); // sets the widget as disabled so you can't upload again
                            }
                        }
                        else {
                            e.component.reset();
                            FileUploadList = [];
                        }
                        var alertResult = DevExpress.ui.dialog.alert(response.Result.Message,
                            (response.Result.Success)
                                ? 'Message'
                                : 'Error'
                        );
                    }
                }).dxFileUploader('instance');
            }

            if (allowDragAndDropZone == false) {
                //----------- create widget without the external drag and Drop zone ----------------------
                // create class for widget
                var widgetClass = '.fileUpLoader_noZone_widgetOptions';
                $('#fileUpLoaderDiv_widgetOptions').addClass('fileUpLoader_noZone_widgetOptions');
                RemoveElement('dropzone-external_widgetOptions');
                var fileUploader = $(widgetClass).dxFileUploader({
                    dropZone: $(widgetOptions.dragAndDropZone),
                    invalidFileExtensionMessage: 'File type is not allowed',
                    labelText: 'or Drop file here',
                    uploadButtonText: 'Upload',
                    uploadUrl: FileUploadUtil(widgetOptions.strObscureFilename ?? false, widgetOptions.filePrefix ?? 'RMA', widgetOptions.fileSuffix ?? '_the End'),
                    multiple: widgetOptions.allowMultipleFiles ?? true, // option
                    uploadMode: widgetOptions.uploadMode,
                    maxFileSize: widgetOptions.maxFileSize ?? 1500000,
                    allowedFileExtensions: allowedExtensions,
                    onUploaded: function (e) {
                        console.log(e);
                        var response = JSON.parse(e.request.responseText);

                        if (response.Result.Success) {
                            FileUploadList = response.Data.Files;
                            if (!widgetOptions.allowMultipleFiles) {
                                e.component.option('disabled', true); // sets the widget as disabled so you can't upload again
                            }
                        }
                        else {
                            e.component.reset();
                            FileUploadList = [];
                        }
                        var alertResult = DevExpress.ui.dialog.alert(response.Result.Message,
                            (response.Result.Success)
                                ? 'Message'
                                : 'Error'
                        );
                    }
                }).dxFileUploader('instance');
            }
        }

        function toggleDropZoneActive(dropZone, isActive) {
            if (isActive) {
                dropZone.classList.add('dx-theme-accent-as-border-color');
                dropZone.classList.remove('dx-theme-border-color');
                dropZone.classList.add('dropzone-active');
            } else {
                dropZone.classList.remove('dx-theme-accent-as-border-color');
                dropZone.classList.add('dx-theme-border-color');
                dropZone.classList.remove('dropzone-active');
            }
        }
        var uploadProgressBar = $('#upload-progress_widgetOptions').dxProgressBar({
            min: 0,
            max: 100,
            width: '30%',
            showStatus: false,
            visible: false
        }).dxProgressBar('instance');
    });

</script>


<style>
    .note {
        display: block;
        font-size: 10pt;
        color: #484848;
        margin-left: 9px;
    }

        .note > span {
            font-weight: 700
        }

        .note > div {
            font-weight: 700
        }

    #dropzone-external_widgetOptions {
        width: 250px;
        height: 200px;
        background-color: rgba(183, 183, 183, 0.1);
        border-width: 2px;
        border-style: dashed;
        padding: 10px;
    }

        #dropzone-external_widgetOptions > * {
            pointer-events: none;
        }

        #dropzone-external_widgetOptions.dropzone-active {
            border-style: solid;
        }

    .widget-container > span {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 16px;
    }

    #dropzone-image_widgetOptions {
        max-width: 100;
        max-height;
    }

    #dropzone-external_widgetOptions_widgetOptions > span {
        font-weight: 100;
        opacity: 0.5;
    }

    #upload-progress_widgetOptions {
        display: flex;
        margin-top: 10px;
    }

    .flex-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>