define(['m', '_', 'event', 'teams', 'views/topNavBar', 'views/footer'], function (m, _ , Events, teams, topNavBar, footer) {

    var confidentialSelection = {};


    confidentialSelection.toggleTeam = function(teamId, activatedTeams){
        return function(isActive){
            if(isActive){
                activatedTeams().push(teamId);
                return;
            }
            activatedTeams(_.difference(activatedTeams(), [teamId]));
        };
    };

    confidentialSelection.teamInput = function(teamName, teamId, activatedTeams){
        var checked = _.includes(activatedTeams(), teamId) ? '[checked=]' : '';
        var callback = confidentialSelection.toggleTeam(teamId, activatedTeams);
        return m('label.uk-width-1-5',
            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), teamName);
    };

    confidentialSelection.scoreInput = function(score, activatedScores){
        var checked = _.includes(activatedScores(), score) ? '[checked=]' : '';
        var callback = confidentialSelection.toggleTeam(score, activatedScores);
        return m('label.uk-width-1-5',
            m('input[type=checkbox]' + checked, {onchange: m.withAttr("checked", callback)}), score);
    };

    confidentialSelection.chooseTeams = function(model){
        return  m('form.uk-grid',
                    m('div.uk-width-1-6', m('label', m('b', 'Équipes'))),
                    m('div.uk-width-5-6',
                        m('div.uk-grid', [
                            confidentialSelection.teamInput('Bleu', 'bleu', model.activatedTeams),
                            confidentialSelection.teamInput('Rouge', 'rouge', model.activatedTeams),
                            confidentialSelection.teamInput('Jaune', 'jaune', model.activatedTeams),
                            confidentialSelection.teamInput('Gris', 'gris', model.activatedTeams),
                    ]))
                    );
    };

    confidentialSelection.chooseScore = function(model){
        return  m('form.uk-grid',
                    m('div.uk-width-1-6', m('label', m('b', 'Score'))),
                    m('div.uk-width-5-6',
                        m('div.uk-grid', [
                            confidentialSelection.scoreInput(1, model.activatedScores),
                            confidentialSelection.scoreInput(2, model.activatedScores),
                            confidentialSelection.scoreInput(3, model.activatedScores),
                            confidentialSelection.scoreInput(4, model.activatedScores),
                            confidentialSelection.scoreInput(5, model.activatedScores)
                    ]))
                    );
    };

    confidentialSelection.controller = function(model){
        return model;
    };

    confidentialSelection.view = function(model){
        return m('div.uk-grid', [
            m('div.uk-width-1-2', confidentialSelection.chooseTeams(model)),
            m('div.uk-width-1-2', confidentialSelection.chooseScore(model))
        ]);
    };


    var confidentialTable = {};

    confidentialTable.controller = function(model){
        var players = m.prop([]);
        var ctrl = {};
        ctrl.model = model;
        ctrl.players = m.request({method: "GET", url: "api/players.json"}).then(players);
        return ctrl;
    };

    confidentialTable.arrows = function(){
        var style = {
            display: 'inline-block',
            'line-height': '0.5em',
            'margin-right': '1em',
            'font-size': '0.7em'
        };
        return  m('span', {style: style},
                      m('i.fa.fa-chevron-up'),
                      m('br'),
                      m('i.fa.fa-chevron-down')
                  );
    };

    confidentialTable.tableHeader = function(){
        return  m('thead',
                    m('tr', [
                        m('th', confidentialTable.arrows(), 'Équipe'),
                        m('th', confidentialTable.arrows(), 'Nom'),
                        m('th', 'Courriel'),
                        m('th', 'Téléphone'),
                        m('th', confidentialTable.arrows(), 'Cote')
                    ]));
    };

    confidentialTable.getPlayerTeamIcon = function(player){
        var background = teams.getTeamColor(player.team);
        var style = {width: '20px', height: '20px', 'background-color': background};
        return m('div', {style: style}, m.trust(' '));
    };

    confidentialTable.playerRow = function(player){
        return  m('tr',[
                    m('td', confidentialTable.getPlayerTeamIcon(player)),
                    m('td', player.name),
                    m('td', player.email),
                    m('td', player.tel),
                    m('td', player.score)
        ]);
    };

    confidentialTable.onlyPlayerOfTeam = function(visibleTeam){
        return function(player){
            return _.includes(visibleTeam, player.team);
        };
    };

    confidentialTable.onlyPlayerOfScore = function(visibleScores){
        return function(player){
            return _.includes(visibleScores, player.score);
        };
    };

    confidentialTable.tableBody = function(players, visibleTeam, activatedScores){
        return  m('tbody',
                    _(players)
                    .filter(confidentialTable.onlyPlayerOfTeam(visibleTeam))
                    .filter(confidentialTable.onlyPlayerOfScore(activatedScores))
                    .map(confidentialTable.playerRow).value()
                );
    };

    confidentialTable.view = function(ctrl){
        return  m('table.uk-table.uk-table-hover.uk-table-striped',
                    confidentialTable.tableHeader(),
                    confidentialTable.tableBody(ctrl.players(),
                                                ctrl.model.activatedTeams(),
                                                ctrl.model.activatedScores()
                                            )
        );
    };

    var testComponent2 = {};

    testComponent2.controller = function(){
        var counter = m.prop(0);
        return {counter: counter, plusplus: function(){
            counter(counter() + 1);
        }};
    };

    testComponent2.view = function(ctrl){
        return m('button', {onclick: ctrl.plusplus}, "test component 2 " + ctrl.counter());
    };

    var testComponent = {};

    testComponent.controller = function(){
        var counter = m.prop(0);
        return {counter: counter, plusplus: function(){
            counter(counter() + 1);
        }};
    };

    testComponent.view = function(ctrl){
        return  m('div', [
                    m('button', {onclick: ctrl.plusplus}, "test component " + ctrl.counter()),
                    m.component(testComponent2)]);
    };



    var confidentialPageBody = {};

    confidentialPageBody.controller = function(model){
        model.activatedTeams = m.prop(['bleu', 'rouge', 'jaune', 'gris']);
        model.activatedScores = m.prop([1, 2, 3, 4, 5]);
        return model;
    };

    confidentialPageBody.view = function(model){
        return m('div', [
            m.component(confidentialSelection, model),
            m.component(confidentialTable, model),
            m.component(testComponent)

        ]);
    };





    var confidentialPage = {};


    confidentialPage.view  = function(){
        return [
                m.component(topNavBar),
                m('div.uk-grid.uk-margin-top.uk-margin-bottom',
                    m('div.uk-width-large-3-5.uk-width-small-1-1.uk-container-center',[
                        m.component(confidentialPageBody, {})
                    ])),
                m.component(footer)
            ];
    };


    return confidentialPage;


});