STATE 객체 생성

var STATE = (function() {
    var c = {toString: function () {return '완료';}};
    var p = {toString: function () {return '진행';}};

    return {
        COMPLETE: function(){return c;},
        PROGRESS: function(){return p;}
    }
})();

var todo = (function(){
    var tasks = [];

    var addTask = (function(){
        var id = 0;

        return function(title){
            var result = id;
            tasks.push({id:id++, title:title, state:STATE.PROGRESS()});
            render();
            return result;
        }
    })();

    var removeTask = function(id){
        var isRemoved = false;
        for(var i =0; i< tasks.length; i++){
            if(tasks[i].id === id){
                tasks.splice(i,1);
                isRemoved = true;
                break;
            }
        }

        if(!isRemoved) {
            warning('삭제된거 없음(removeTask : invalid id)');
        }
        render();
    };

    var changeState = function(id, state){

        var ID = false, STATE;
        for(var i = 0; i < tasks.length; i++){
            if(tasks[i].id === id){
                ID = id;
                break;
            }
        }
        if(ID === false) {
            warning('changeState : invalid id - ' + id);
            return;
        }
        STATE = state;

        for(var i =0; i< tasks.length; i++){
            if(tasks[i].id === ID){
                tasks[i].state = STATE;
                break;
            }
        }
        render();
    };

    var warning = console.log;
    var target;

    var render = function(){
        target.render(Object.assign(tasks));
    };

    return{
        setRenderer: function(renderer){
            if(typeof renderer.init !== 'function' || typeof renderer.render !== 'function') return;
            target = renderer;
            target.init(todo);
        },
        add:addTask,
        remove:removeTask,
        toggle:function(id){
            for(var i = 0; i<tasks.length;i++){
                if(tasks[i].id === id){
                    if(tasks[i].state === STATE.PROGRESS()) changeState(id, STATE.COMPLETE());
                    else changeState(id, STATE.PROGRESS());
                    break;
                }
            }
        }
    }
})();


var con = (function(){
    return {
        init: function(todo){
            console.clear();
        },
        render: function(tasks){
            console.log('진행');

            var task;

            for(var i = 0; i < tasks.length; i++){
                task = tasks[i];
                if(task.state === STATE.PROGRESS()){
                    console.log(task.id+'.', task.title+'('+task.state.toString()+')');
                }
            }

            console.log('완료');

            for(var i = 0; i < tasks.length; i++){
                task = tasks[i];
                if(task.state === STATE.COMPLETE()){
                    console.log(task.id+'.', task.title+'('+task.state.toString()+')');
                }
            }
        }
    }
})();

var html = (function(){
    var completeLi, progressLi;
    var host;

    return {
        init: function(todo){
            progressLi = document.querySelector('#todo .progress li');
            completeLi = document.querySelector('#todo .complete li');

            host = todo;

            progressLi.parentNode.removeChild(progressLi);
            completeLi.parentNode.removeChild(completeLi);

            console.log('form 안의 input 을 연결');//host.add
        },
        render: function(tasks){
            if(typeof completeLi === 'undefined' || typeof progressLi === 'undefined') {
                return;
            }
            console.log('//각 리스트를 비운다.');
            document.querySelector('#todo .progress').innerHTML = '';
            document.querySelector('#todo .complete').innerHTML = '';

            console.log('//진행을 채운다.');
            console.log('//완료를 채운다.');
            var progress = document.querySelector('#todo .progress');
            var complete = document.querySelector('#todo .complete');

            var task, child, inputs;
            for(var i = 0; i < tasks.length; i++){
                task = tasks[i];
                if(task.state === STATE.PROGRESS()){
                    child = progressLi.cloneNode(true); // true 를 하면 노드의 자식까지 모두 복제
                    child.querySelector('p').innerHTML = task.title;
                    inputs = child.querySelectorAll('input');

                    inputs[0].setAttribute('data-task-id', task.id);
                    inputs[0].onclick = function(){
                        host.toggle(this.getAttribute('data-task-id'));
                    };
                    inputs[1].setAttribute('data-task-id', task.id);
                    inputs[1].onclick = function(){
                        host.remove(this.getAttribute('data-task-id'));
                    };

                    progress.appendChild(child);
                }else{
                    child = completeLi.cloneNode(true); // true 를 하면 노드의 자식까지 모두 복제
                    child.querySelector('p').innerHTML = task.title;
                    inputs = child.querySelectorAll('input');

                    inputs[0].setAttribute('data-task-id', task.id);
                    inputs[0].onclick = function(){
                        host.toggle(this.getAttribute('data-task-id'));
                    };
                    inputs[1].setAttribute('data-task-id', task.id);
                    inputs[1].onclick = function(){
                        host.remove(this.getAttribute('data-task-id'));
                    };
                    complete.appendChild(child);
                }
            }


            console.log('//인풋 박스를 비운다.');
        }
    }
})();