<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller= "YouTubeSearchController">
    <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="columns" type="List" default="[]"/>
    <aura:attribute name="data" type="List" default="[]"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
            <lightning:input name="input1" value="{!v.value1}" label="Field 1" />
        </lightning:layoutItem>
        <lightning:layoutItem size="4">
            <lightning:input name="input2" value="{!v.value2}" label="Field 2" />
        </lightning:layoutItem>
        
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.handleClick }"/>
            </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");
        
        // concatenate Strings 
        var value1 = component.get("v.value1");
        var value2 = component.get("v.value2");
        var newVal = value1+value2;
        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);
    },
    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':
                //modal logic may come here
                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;
        }
    }
})