var createUploadFaqButton = {
    icon: 'BulkUpload',
    class: 'uploadFiles',
    text: 'Cargar archivos',
    permissions: 'EditListItems',
    onClick: function(component, item){
        var form = null;
        var context = component._getPageContext();
        var page = component._getPage();
        var item = item != null ? item : context.item;

        // Create dynamic Popup
        var dynamicPopup = app.popup.create({
            content: `
                <div class="popup update-state-popup" style="overflow:auto">
                    <div class="close-popup close-button"><i class="ms-Icon ms-Icon--ChromeClose" aria-hidden="true"></i></div>
                    <div class="block">
                        <div class="update-form"></div>
                        <div class="buttons-container ms-slideLeftIn10 hide">
                            <button class="button button-fill close-popup">Cancelar</button>
                            <button class="button button-fill update">Cargar</button>
                        </div>
                    </div>
                </div>
            `,
            // Events
            on: {
                opened: function (popup) {
                    var $container = $(popup.el),
                        $updateButton = $container.find('.update'),
                        $closeButton = $container.find('.close-popup'),
                        $buttonsContainer = $container.find('.buttons-container');

                    // formulario de actualización
                    form = new EFWForm({
                        editable: true,
                        container: $container.find('.update-form'),
                        title: ('Carga de documentos sobre carpeta ' + item.FileLeafRef),
                        description: 'Por favor complete los datos para la carga de documentación sobre la capeta actual. Toda esta información será utilizada para que usted pueda realizar búsquedas y filtros de información más efectiva. Si carga más de un archivo al mismo tiempo, la información que especifique en este formulario será compartida por todos estos archivos.',
                        fields: (function(){
                            var fields = context.list.ViewFields;

                            fields = fields.filter(function(f){
                                return f.ReadOnlyField == false
                            })

                            // agregar campo de adjuntos virtual
                            fields.push({
                                Id: generateUUID(),
                                TypeAsString: 'Attachments',
                                Title: 'Cargar archivos',
                                Description: 'Seleccionar simultáneamente un máximo de 8 archivos adjuntos. El tamaño total de los archivos adjuntos, no debe superar los 100 MB.',
                                InternalName: 'Attachments',
                            })

                            return fields
                        })()
                    });

                    $buttonsContainer.removeClass('hide');

                    // {event} cerrar popup
                    $closeButton.on('click', function(e){
                        popup.close();
                    });

                    // {event} enviar correo
                    $updateButton.on('click', function(e){
                        form.checkFieldsRequired();

                        if (form.getValidation()){
                            var successCount = 0;
                            var failureCount = 0;
                            var metadata = form.getMetadata();
                            var dialog = app.dialog.progress('Cargando archivos', 10);
                            var files = metadata['Attachments'];

                            delete metadata['Attachments'];

                            // función que verifica progreso de carga
                            var uploadProcessComplete = function(){
                                dialog.setText(successCount + ' archivos cargados de ' + files.length);
                                dialog.setProgress(successCount * 100 / files.length);

                                // se se han cargado todos los componentes, cerrar panel de carga
                                if ((successCount + failureCount) == files.length){
                                    dialog.close();

                                    // reinicar virtualList con el elemento seleccionado y reacticar contexto
                                    component.requestItems();
                                    popup.close();
                                }
                            };

                            uploadProcessComplete();
                            // inicar cargar y subida de archivos
                            for (var i = 0; i < files.length; i++){
                                (function(file){
                                    spo.uploadFile(spo.getSiteUrl(), context.parameters.folderServerRelativeUrl, context.list.Title, file, metadata, true,
                                        function(response){
                                            successCount++;
                                            uploadProcessComplete();
                                        },
                                        function(response){
                                            failureCount++;
                                            uploadProcessComplete();
                                        },
                                    )
                                })(files[i])
                            }
                        } else {
                            app.dialog.create({
                                title: 'Datos insuficientes',
                                text: 'Por favor complete todos los campos indicados como requeridos e inténtelo nuevamente',
                                buttons: [
                                    {
                                        text: 'Aceptar',
                                    },
                                ],
                                verticalButtons: false,
                            }).open();
                        }
                    })
                },
                closed: function (popup) {
                    if (form) form.destroy();
                },
            }
        });

        dynamicPopup.open();
    }
}