//Budget controler
var budgetController = (function() {

    //kreiram puno objects sa function construction object

    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;
    };

    //da ima npr 10 incoma stavili bi ih u array
    var allExpenses =[];
    var allIncomes = [];
    var totalExpenses = 0;

    //ili još bolje zbog data strukture
    var data = {
        allItems: {
            exp: [],
            inc: [],
        },
        totals: {
            exp: 0,
            inc: 0
        }
    };

    return {
        addItem: function(type, des, val) {
            var newItem, ID;
            //[1,2,3,4,5], next ID = 6
            //[1,3,6,8,9], next ID = 10
            // ID = last ID + 1

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

            //create new item based on 'inc' or 'exp' type
            if(type === 'exp') {
                newItem = new Expense ( ID, des, val);
            }else if (type === 'inc'){
                newItem = new Income (ID, des, val );
            }
            //push it into our data structure
            data.allItems[type].push(newItem);

            //return new element
            return newItem;

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



// UI controler
var UIController = (function(){

    //iz razloga što imamo puno classes koje ak promjenim html sve treba mjenjati onda ću tu složiti objekt sa svima
    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, // biti će ili inc ili exp
                description: document.querySelector(DOMstrings.inputDescription).value,
                value: document.querySelector(DOMstrings.inputValue).value
            };
        },
        getDOMstrings: function() {
            return DOMstrings; // expose DOMstrings into the public
        },


        addListItem: function(obj, type) {
            //create HTML string with placeholder text
            var html, newHtml, element;

            if(type === 'inc') {
                element = DOMstrings.incomeContainer;

                html = '<div class="item clearfix" id="inc-%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="exp-%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 some actual data


            newHtml = html.replace('%id%', obj.id);
            newHtml = newHtml.replace('%description%', obj.description);
            newHtml = newHtml.replace('%value%', formatNumber(obj.value, type));
            // Insert theHTML into the DOM ima u dokumentaciji developer mozzila

            document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);
        },



    };
})();

// Global app controler

var controller =(function(budgetCtrl, UICtrl){

    var setUpEventListeners = function() {

        var DOM = UICtrl.getDOMstrings();

        // upute su bile unutar query selectora ali kad smo dodali keypress napravili smo novi function po DRY principu
        document.querySelector(DOM.inputBtn).addEventListener("click", ctrlAddItem);

        // za enter umjesto buttona
        document.addEventListener("keypress" , function(event){
            if(event.keyCode === 13 || event.which === 13){
            ctrlAddItem();
            }
    });


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

        // 1. Get field input data
        input = UICtrl.getInput();


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

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

       // 4. Calculate the budget
       // 5. Display the budget on the UI

   };






    return {
        init: function() {
            console.log("Aplication has started");
            setUpEventListeners();
        }
    };


})(budgetController, UIController);

controller.init();