var budgetController = (function (){

var Expense = function(id, description, value){
    this.id = id;
    this.description = description;
    this.value = value;
};

var Income = function(id, description, value){
    this.id = id;
    this.description = description;
    this.value = value;
};

    var data = {
        allItems : {
            exp : [],
            inc : []
            },
        totals : {
            exp : 0,
            inc : 0
        }
    };

    return {
        addAllItems : function(type, des, val){
            var newItem, ID;

            // create a new ID
            if (data.allItems[type].length > 0){
            ID = data.allItems[type][data.allItems[type].length -1]. id + 1;
            } else {
                ID = 0;

            }

            // create a new item based on 'exp' or 'inc' type
            if (type === 'exp'){
                newItem = new Expense (ID, des, val);
            } else if ( type === 'inc'){
                newItem = new Income (ID, des, val)
            }

            // push it to our data structure
            data.allItems[type].push(newItem);

            // return a new element
            return newItem;

        },
        testing : function(){
            console.log(data);
        }


    };



})();



// UI controller
var UIController = (function (){
    var DOMStrings = {
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue : '.add__value',
        inputBtn : '.add__btn',
        incomeContainer : '.income__list',
        expensesContainer : '.expenses__list'
    }


return {
    getInput : function(){
        return {
            type: document.querySelector(DOMStrings.inputType).value,  // will be either inc or exp.
            description: document.querySelector(DOMStrings.inputDescription).value,
            value: document.querySelector(DOMStrings.inputValue).value

        };
    },

    addListItem : function(obj, type){
      var html, newhtml, element;
        // Create an HTML string with placeholder text

        if (type === 'inc'){
            element = DOMStrings.incomeContainer;
        html = '<div class="item clearfix" id="income-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';

        } else if (type === 'exp'){
            element = DOMStrings.expensesContainer;
          html ='<div class="item clearfix" id="expense-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';

        }

        // Replace the placeholder text with actual data
        newhtml = html.replace ('%id%', obj.id);
        newhtml = newhtml.replace ('%description%', obj.description);
        newhtml = newhtml.replace ('%value%', obj.value);

        // Insert the HTML into the DOM
        document.querySelector(element).insertAdjacentHTML('beforeend', newhtml);

    },

     getDOMStrings : function(){
         return DOMStrings;
     }
};


})();


// controller
var controller = (function (budgetCtrl, UICtrl){


    var setupEventListener = function(){

    var DOM = UICtrl.getDOMStrings();

    document.querySelector(DOM.inputBtn).addEventListener ('click', ctrlAddItem);

    document.addEventListener('keypress', function(event){
        if(event.keypress === 13 || event.which === 13){

            ctrlAddItem();
        }

    });

    };


    var ctrlAddItem = function(){
        var input, newItem;

    // 1. Get user input.
        input = UICtrl.getInput();

    // 2. Add the item to the budget controller.
        newItem = budgetCtrl.addAllItems(input.type, input.description, input.value);


    // 3. Add the item to UI.
        UICtrl.addListItem(newItem, input.type);

    // 4. Calculate the budget.

    // 5. Display the budget on the UI.

    };

   return {
       init : function(){
           console.log('Application has started!');
           setupEventListener();
       }
   };



})(budgetController, UIController);


controller.init();