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


    var confidentialSelection = {};

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

    confidentialSelection.teamInput = function(teamName, teamId, activatedTeams){
        var isActive = _.includes(activatedTeams(), teamId);
        var class_ =  isActive ? 'uk-badge-success' : '';
        var callback = confidentialSelection.toggleTeam(teamId, activatedTeams);
        return  m('div.uk-badge.uk-margin-left.uk-border-rounded',
                    {class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
                        m('h3', {style: {width: '80px'}}, teamName)
        );

    };

    confidentialSelection.scoreInput = function(score, activatedScores){
        var isActive = _.includes(activatedScores(), score);
        var class_ =  isActive ? 'uk-badge-success' : '';
        var callback = confidentialSelection.toggleTeam(score, activatedScores);
        return  m('div.uk-badge.uk-margin-left.uk-border-rounded',
                    {class: class_, 'data-selected': isActive, onclick: m.withAttr("data-selected", callback)},
                        m('h3', {style: {width: '80px'}}, score)
        );
    };

    confidentialSelection.chooseTeams = function(model){
        return  m('form.uk-grid', {style: {'margin-top': '1em'}},
                    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', {style: {'margin-top': '1em'}},
                    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', [
            confidentialSelection.chooseTeams(model),
            confidentialSelection.chooseScore(model)
        ]);
    };


    var confidentialTable = {};

    confidentialTable._sortFunction = function(sortingElm){

    };

    confidentialTable._sortPlayers = function(sorting, playerList){
        var sortingKeys = _.map(sorting(), 'key');
        var sortingDirections = _.map(sorting(), function(o){
            return o.direction == 1 ? 'desc' : 'asc';
        });
        return _.orderBy(playerList, sortingKeys, sortingDirections);
    };

    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);
        ctrl.sortPlayers = function(){
            ctrl.players(confidentialTable._sortPlayers(ctrl.model.sorting, ctrl.players()));
        };
        return ctrl;
    };

    confidentialTable._getSortDict = function(sorting){
        var ret = {};
        _.each(sorting(), function(elm){
            ret[elm.key] = elm.direction;
        });
        return ret;

    };

    confidentialTable._isSortingUp = function(sorting, key){
        var dict = confidentialTable._getSortDict(sorting);
        return dict[key] === 1;
    };

    confidentialTable._isSortingDown = function(sorting, key){
        var dict = confidentialTable._getSortDict(sorting);
        return dict[key] === -1;
    };

    confidentialTable.arrows = function(sorting, key){
        var sortUp = confidentialTable._isSortingUp(sorting, key);
        var sortDown = confidentialTable._isSortingDown(sorting, key);
        var style = {
            display: 'inline-block',
            'line-height': '0.5em',
            'margin-right': '1em',
            'font-size': '0.7em'
        };
        var sortedStyle = {color: '#8cc14c', 'font-weight': 'bold'};
        return  m('span', {style: style},
                      m('i.fa.fa-chevron-up', {style: sortUp ? sortedStyle: {}}),
                      m('br'),
                      m('i.fa.fa-chevron-down',  {style: sortDown ? sortedStyle: {}})
                  );
    };

    confidentialTable._setSorting = function(sorting, key){
        var newDirection = {key: key, direction: -1 * confidentialTable._getSortDict(sorting)[key]};
        var directions = _.filter(sorting(), function(o){
            return o.key != key;
        });
        sorting([newDirection].concat(directions));
    };

    confidentialTable.tableHeader = function(sorting){
        var setSorting = function(key){
            return _.partial(confidentialTable._setSorting, sorting, key);
        };
        return  m('thead',
                    m('tr', [
                        m('th', {onclick: setSorting('team')}, confidentialTable.arrows(sorting, 'team'), 'Équipe'),
                        m('th', {onclick: setSorting('name')}, confidentialTable.arrows(sorting, 'name'), 'Nom'),
                        m('th.uk-hidden-small', 'Courriel'),
                        m('th.uk-hidden-small', 'Téléphone'),
                        m('th', {onclick: setSorting('score')}, confidentialTable.arrows(sorting, 'score'), '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.uk-hidden-small', player.email),
                    m('td.uk-hidden-small', 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){
        ctrl.sortPlayers();
        return  m('table.uk-table.uk-table-hover.uk-table-striped',
                    confidentialTable.tableHeader(ctrl.model.sorting),
                    confidentialTable.tableBody(ctrl.players(),
                                                ctrl.model.activatedTeams(),
                                                ctrl.model.activatedScores()
                                            )
        );
    };

    var confidentialPageBody = {};

    confidentialPageBody.controller = function(){
        var model = {};
        model.activatedTeams = m.prop(['bleu', 'rouge', 'jaune', 'gris']);
        model.activatedScores = m.prop([1, 2, 3, 4, 5]);
        model.sorting = m.prop([{key: 'team', direction: 1},  {key: 'score', direction: -1}, {key: 'name', direction: 1}]);
        return model;
    };

    confidentialPageBody.view = function(model){
        return  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(confidentialSelection, model),
                        m.component(confidentialTable, model),
                    ]));
    };


    var loginComponent = {};

    loginComponent.controller = function(){
        return {email: m.prop(), password: m.prop()};
    };

    loginComponent.logo = function(){
        var style = 'height: 250px; width: 250px; background-size: 250px; background-image: url(images/logosansfond.JPG);';
        return m('div.uk-cover-background.uk-container-center', {style: style});
    };

    loginComponent.logoLine = function(){
        return  m('div.uk-grid.uk-margin',
                    m('div.uk-width-1-1', loginComponent.logo()));
    };

    loginComponent.login = function(ctrl){
        return function(){
            var salt = "9'D)E@E{DSq[|l2bq!v";
            window.secret = salt + ctrl.email() + ctrl.password();

        };
    };

    loginComponent.loginForm = function(ctrl){
        return  m('div.uk-panel.uk-panel-box.uk-panel-box-secondary.uk-width-large-1-3.uk-container-center.uk-margin', [
            m('form.uk-text-center', {onsubmit: m.withAttr("form", loginComponent.login(ctrl))},
                m('div.uk-form-row',
                    m('label', "Nom d'utilisateur ",
                        m('input[type=text][required].uk-form-width-small', {oninput: m.withAttr("value", ctrl.email)}))),
                m('div.uk-form-row',
                    m('label', "Mot de passe ",
                        m('input[type=password][required].uk-form-width-small', {oninput: m.withAttr("value", ctrl.password)}))),
                m('div.uk-form-row', m('button.uk-button', m("i.fa.fa-mars-double"), " Pénétrez"))
            )
        ]);
    };

    loginComponent.view = function(ctrl){
        return m('div', [
            loginComponent.logoLine(),
            loginComponent.loginForm(ctrl)
        ]);
    };


    var confidentialPage = {};

    confidentialPage.view  = function(){
        var body;
        if(!window.secret){
            body = loginComponent;
        }else{
            body = confidentialPageBody;
        }
        return [
                m.component(topNavBar),
                m.component(body),
                m.component(footer)
            ];
    };

    return confidentialPage;
});