<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="value1" type="String" default="" />
    <aura:attribute name="value2" type="String" default="" />
    <aura:attribute name="idsList" type="Integer" default="1" />
    
    
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
	<aura:attribute name="acc" type="Account" default="{'sobjectType' : 'Account'}"/>
    
    <aura:attribute name="columns" type="List" default="[]"/>
    <aura:attribute name="data" type="List" default="[]"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <aura:if isTrue="{!v.isModalOpen}">
             
        <!-- Modal/Popup Box starts here-->
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
             <div class="slds-modal__container">
                 <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"> YourAddress </h2>
                    </header>
                  
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                            <fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
                                    <div class="slds-form-element__control">
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_1-of-1">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-04"> Address 1</label>
                                            <div class="slds-form-element__control">
                                                <lightning:input aura:id="addressLine1Id" name="myname" value="{!v.acc.AddressLine1__c}"/>
                                            </div>
                                            <label class="slds-form-element__label" for="form-element-id-04">Mailing Address 2</label>
                                            <div class="slds-form-element__control">
                                                <lightning:input aura:id="addressLine2Id" name="myname" value="{!v.acc.AddressLine2__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-05">City</label>
                                            <div class="slds-form-element__control">
                                                    <lightning:input aura:id ="cityId" name="myname" value="{!v.acc.City__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                       
                                      <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                          <div class="slds-form-element">
                                            <label class="slds-form-element__label" for="form-element-id-07">Zip/Postal Code</label>
                                            <div class="slds-form-element__control">
                                                    <lightning:input aura:id ="zipId" name="myname" value="{!v.acc.zip__c}"/>
                                            </div>
                                          </div>
                                        </div>
                                        </div>
                                       
                                      </div>
                                    </div>
                                  </fieldset>
                    </div>
                    <!--Modal/Popup Box Footer footer here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand"
                                          label="Add"
                                          title="OK"
                                          onclick="{!c.handleClick}"/> 
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    
    
    <lightning:layout horizontalAlign="space">
       
        
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.OpenPop }"/>
            </lightning:layoutItem>
        </lightning:layout>
        
    </lightning:layout>
    <lightning:layout horizontalAlign="space">
        
        
        <lightning:layoutItem size="4">
            <lightning:datatable
                                 columns="{! v.columns }"
                                 data="{! v.data }"
                                 keyField="id" 
                                 onrowaction="{! c.handleRowAction }"
                                 hideCheckboxColumn="true"/>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

({
    init:  function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Concatenated Result', fieldName: 'concatenatedResult', type: 'text'},
            {label: 'View', type: 'button', initialWidth: 135, typeAttributes: { label: 'Edit', name: 'edit', title: 'Edit'}},
            {label: 'Remove', type: 'button', initialWidth: 135, typeAttributes: { label: 'Remove', name: 'remove', title: 'Remove'}}
        ]);  
    },
    handleClick : function(component, event, helper) {
        
        var listID= component.get("v.idsList");
       
        
        var address1 = component.find("addressLine1Id").get("v.value");
        var address2 = component.find("addressLine2Id").get("v.value");
        var citycode =  component.find("cityId").get("v.value");
        var zipcode =  component.find("zipId").get("v.value");
        
        
        // concatenate Strings 
       
        var newVal = address1+','+address2+','+citycode+','+zipcode;
        var data = component.get("v.data");
        var obj = {  "id": listID,
                   "concatenatedResult": newVal};
        data.push(obj);
        component.set("v.data", data);
        component.set("v.idsList", parseInt(component.get("v.idsList"))+1);
    },
     closeModel: function(component, event, helper) {
    // Set isModalOpen attribute to false  
     component.set("v.isModalOpen", false);
    },
    
    OpenPop: function(component, event, helper) {
    // Set isModalOpen attribute to false  
     component.set("v.isModalOpen", true);
    },
    handleRowAction : function(component, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        var data = component.get('v.data');
        switch (action.name) {
            case 'edit':
                data = data.map(function(rowData) {
                    if (rowData.id == row.id) {
                        let name = prompt("Enter New Value", row.concatenatedResult);
                        if (name === null) {
                            return;
                        }
                        else{
                            rowData.concatenatedResult = name;
                            component.set("v.data", data);
                            alert(`New value "${name}" has been Updated`);
                        }
                    }
                });
                break;
            case 'remove':
                data = data.map(function(rowData) {
                    if (rowData.id == row.id) {
                        let confirmed = confirm("Are you sure?");
                        if (confirmed === true) {
                            data = data.filter(element => element.id != row.id);
                            component.set("v.data", data);
                            alert("This has been Deleted");
                        }
                        else{
                            return;
                        }
                    }
                });
                break;
        }
    }
})