<aura:component controller="VerificationFilesController" Implements="flexipage:availableForRecordHome,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    <aura:attribute name="recordError" type="String" access="private"/>
<aura:attribute name="isMultiSelectOpen" type="boolean" />
    <aura:attribute name="options" type="List" default="[]"/>
    <aura:attribute name="values" type="List" default="[]"/>
<lightning:button variant="brand" label="Request for Additional Documents" title="Request for Additional Documents" onclick="{!c.openMultiSelectModel}"/>
    <aura:if isTrue="{!v.isMultiSelectOpen}">
        <!--###### MODAL BOX Start From Here ######--> 
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeReviewer}">
                        X
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="header99" class="slds-text-heading--medium">Review Document</h2>
                </div>
                <!--###### MODAL BOX BODY Part Start From Here ######-->
                <div class="slds-modal__content slds-p-around--medium  slds-is-relative slds-scrollable">
                    <aura:if isTrue="{!v.showSpinner}">
                        <div class="demo-only" style="height:6rem;">
                            <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_brand">
                                <span class="slds-assistive-text">Loading</span>
                                <div class="slds-spinner__dot-a"></div>
                                <div class="slds-spinner__dot-b"></div>
                            </div>
                        </div>
                        <aura:set attribute="else">
                            <div class="slds-form-element slds-p-around--medium">

        <lightning:dualListbox aura:id="selectOptions"
                                               name="multipleOptions"  
                                               label= "Select Options" 
                                               sourceLabel="Available Options" 
                                               selectedLabel="Selected Options" 
                                               options="{!v.options}" 
                                               value="{!v.values}" 
                                               onchange="{!c.handleChange}"/>     
 </div>
                        </aura:set>
                    </aura:if>
                </div>
                    <button class="slds-button slds-button--neutral" onclick="{!c.closeReviewer}" >Cancel</button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>
        <!--###### MODAL BOX Part END Here ######-->
        

    </aura:if>

({
    doInit: function(component, event, helper) {         
        var action1 = component.get('c.getTypeWiseDocuments');
        //var typewisedocument = component.find("selectOptions");
        action1.setCallback(this, function(response1) {
            var state = response1.getState();
            if (component.isValid() && state == 'SUCCESS') { 
            var documents = response1.getReturnValue();
            var options = [];
            documents.forEach(function(document)  { 
                    console.log(document);
                    options.push({ value: document.Document_Name__c, label: document.Document_Name__c});
                });
                component.set("v.options", options);
                component.get("v.values");
                alert(JSON.stringify(component.get("v.options")));
            } else {
                console.log('Failed with state: ' + state);
            }
         });
        $A.enqueueAction(action1);
        
    },
handleChange: function (cmp, event) {
        // This will contain an array of the "value" attribute of the selected options
      
         var selectedOptionValue =event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue.toString() + "'");         
    },
     openMultiSelectModel: function(component, event, helper) {
        // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
        component.set("v.isMultiSelectOpen", true);
        alert(component.get("v.isMultiSelectOpen"));
    },
    closeMultiSelectModel : function(component, event, helper) {
        component.set("v.isMultiSelectOpen", false);
    }
})

public class VerificationFilesController {
@AuraEnabled
    public static List<TypeWiseDocument__c> getTypeWiseDocuments(){
        system.debug('getTypeWiseDocuments Controller');
        List<TypeWiseDocument__c> twList = [SELECT  ID,Document_Name__c FROM TypeWiseDocument__c where DocumentType__c = 'Additional'];
        return twList;        
    }
}