<aura:component >
<aura:attribute name="newExpense" type="Expense__c"
     default="{ 'sobjectType': 'Expense__c',
                    'Name': '',
                    'Amount__c': 0,
                    'Client__c': '',
                    'Date__c': '',
                    'Reimbursed__c': false }"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem >
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Expenses</h1>
                <h2 class="slds-text-heading--medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">

       <!-- CREATE NEW EXPENSE -->
            <div aria-labelledby="newexpenseform">
            
                <!-- BOXED AREA -->
                <fieldset class="slds-box slds-theme--default slds-container--small">
            
                <legend id="newexpenseform" class="slds-text-heading--small 
                  slds-p-vertical--medium">
                  Add Expense
                </legend>
            
                <!-- CREATE NEW EXPENSE FORM -->
                <form class="slds-form--stacked">          
                    <lightning:input aura:id="expenseform" label="Expense Name"
                                     name="expensename"
                                     value="{!v.newExpense.Name}"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="expenseform" label="Amount"
                                     name="expenseamount"
                                     min="0.1"
                                     formatter="currency"
                                     step="0.01"
                                     value="{!v.newExpense.Amount__c}"
                                     messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
                    <lightning:input aura:id="expenseform" label="Client"
                                     name="expenseclient"
                                     value="{!v.newExpense.Client__c}"
                                     placeholder="ABC Co."/>
                    <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                                     name="expensedate"
                                     value="{!v.newExpense.Date__c}"/>
                    <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"  
                                     name="expreimbursed"
                                     checked="{!v.newExpense.Reimbursed__c}"/>
                    <lightning:button label="Create Expense" 
                                      class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{!c.clickCreate}"/>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
            
              </fieldset>
              <!-- / BOXED AREA -->
            
            </div>
            <!-- / CREATE NEW EXPENSE -->

        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
<c:expensesList expenses="{!v.expenses}"/>

</aura:component>

({
    clickCreate: function(component, event, helper) {
        var validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            var newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

({
    createExpense: function(component, expense) {
        var theExpenses = component.get("v.expenses");
 
        // Copy the expense to a new object
        // THIS IS A DISGUSTING, TEMPORARY HACK
               
        console.log("Expenses before 'create': " + JSON.stringify(theExpenses));
        theExpenses.push(newExpense);
        component.set("v.expenses", theExpenses);
        console.log("Expenses after 'create': " + JSON.stringify(theExpenses));
        
    }
})