define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer', 'articles/articles', 'images/rain.svg'], function (m, _ , util, resultParser, topNavBar, footer, articles, rainSvg) {
    var mainPageLogo = {};

    mainPageLogo.view = function(){
        return m('div.uk-grid', [
            m('div.uk-large-1-3.uk-medium-2-3.uk-container-center', [
                m('div.uk-cover-background.uk-container-center.uk-margin-left.uk-margin-top',{style: 'height:300px; width: 300px; background-size: 300px; background-image: url(images/logosansfond.JPG);'})
            ])
        ]);
    };

    var mainPageNews = {};

    mainPageNews.view = function(){
        var article = _.get(articles, 0, {});
        return m('div.uk-panel.uk-panel-box',[
            m('div.uk-panel-badge.uk-badge', [
                m('i.fa.fa-newspaper-o', {style: {'font-size': '1.7em'}})
            ]),
            m('h3.uk-panel-title', m('a.uk-link-muted', {href: '#/nouvelles'}, article.title)),
            m('p', article.smallBody || article.body)
        ]);
    };

    var nextGameDaySchedule = {};

    nextGameDaySchedule._toDay = function(){
        var now = new Date();
        return new Date(now.getFullYear(), now.getMonth(), now.getDate());
    };

    nextGameDaySchedule.controller = function(){
        var games = m.prop([]);
        var toDay = new Date();
        return m.request({method: "GET", url: util.resultatsURL()})
               .then(games)
               .then(resultParser.getNightGames)
               .then(function(nightGames){
                   return nextGameDaySchedule._getNextNightGame(nightGames, nextGameDaySchedule._toDay()).games;
               });
    };

    nextGameDaySchedule._getNextNightGame = function(games, date){
        return _.first(_.filter(games, function(game){
            return game.jsDate.getTime() >= date.getTime();
        }));
    };

    nextGameDaySchedule._getTableHead = function(){
        return m('thead', m('tr', [
                    m('td', 'Date'),
                    m('td', 'Heure'),
                    m('td', 'Visiteur'),
                    m('td', 'Receveur')
                ]));
    };

    nextGameDaySchedule._responsoveText = function(largeText, smallText, rain){
        var ret = [];
        if(rain){
            ret.push(rainSvg('1.5em'));
            ret.push(' ');
        }
        ret.push(m('span.uk-visible-large', largeText));
        ret.push(m('span.uk-hidden-large', smallText));
        return ret;
    };

    nextGameDaySchedule._getGamesRow = function(game){
        return m('tr', [
            m('td', nextGameDaySchedule._responsoveText(util.formatDate(game.jsDate),
                                                        util.formatDateSmall(game.jsDate),
                                                        game.rain)),
            m('td', game.time),
            m('td', game.away),
            m('td', game.home)
        ]);
    };

    nextGameDaySchedule._getGamesRows = function(games){
        return _.map(games(), nextGameDaySchedule._getGamesRow);
    };

    nextGameDaySchedule.view = function(games){
        return  m('table.uk-table.uk-table-hover.uk-table-striped.uk-table-condensed',[
                    nextGameDaySchedule._getTableHead(),
                    m('tbody',
                        nextGameDaySchedule._getGamesRows(games)
                    )]);
    };

    var mainPageSchedule = {};

    mainPageSchedule.view = function(){
        return m('div.uk-panel.uk-panel-box',[
            m('div.uk-panel-badge.uk-badge', m('i.fa.fa-calendar', {style: {'font-size': '1.7em'}})),
            m('h3.uk-panel-title', m('a.uk-link-muted', {href: '#/calendrier'}, 'Horaire')),
            m.component(nextGameDaySchedule)
        ]);
    };

    var mainMap = {};

    mainMap.getMap = function(){
        var iframeUrl = "//www.openstreetmap.org/export/embed.html?bbox=-73.59346926212311%2C45.552108282609666%2C-73.58638823032379%2C45.555413895697654&layer=transportmap";
        var externalLink = "http://www.openstreetmap.org/#map=18/45.56830/-73.61476";
        var iframeParams = {
            style: {border: '1px solid black', 'min-height': '300px'},
            width: '100%',
            frameborder: 0,
            scrolling: 'no',
            marginheight: 0,
            src: iframeUrl
        };
        return [
            m('iframe', iframeParams),
            m('br'),
            m('small', m('a', {href: externalLink}, 'Voir la carte'))
        ];
    };

    mainMap.view = function(){
        return m('div.uk-panel.uk-panel-box',[
            m('div.uk-panel-badge.uk-badge', [
                m('i.fa.fa-map-o', {style: {'font-size': '1.7em'}})
            ]),
            m('h3.uk-panel-title', 'Parc Beaubien'),
            mainMap.getMap()
        ]);
    };

    var mainPageBottom = {};

    mainPageBottom.regularSizeView = function(){
        return m('div.uk-grid.uk-visible-large.uk-grid-match', [
            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageNews)),
            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainPageSchedule)),
            m('div.uk-width-large-1-3.uk-width-medium-1-3', m.component(mainMap))
        ]);
    };

    mainPageBottom.mediumSizeView = function(){
        return  m('div.uk-visible-medium', [
                    m('div.uk-grid.uk-grid-match', [
                        m('div.uk-width-medium-1-2', [m.component(mainPageNews)]),
                        m('div.uk-width-medium-1-2', [m.component(mainPageSchedule)]),
                    ]),
                    m('div.uk-grid',
                        m('div.uk-width-medium-1-1', m.component(mainMap))
                    )
        ]);
    };

    mainPageBottom.smallSizeView = function(){
        return  m('div.uk-visible-small',
                  [
                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainPageNews))),
                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainPageSchedule))),
                    m('div.uk-grid', m('div.uk-width-small-1-1', m.component(mainMap)))
              ]);
    };

    mainPageBottom.view = function(){
        return  m('div.uk-margin-top.uk-margin-bottom.uk-grid',
                    m('div.uk-width-large-3-5.uk-width-medium-4-5.uk-width-small-1-1.uk-container-center', [
                        mainPageBottom.regularSizeView(),
                        mainPageBottom.mediumSizeView(),
                        mainPageBottom.smallSizeView()
                    ])
        );
    };

    var mainPage = {};

    mainPage.view  = function(){
        return [
                m.component(topNavBar),
                m.component(mainPageLogo),
                m.component(mainPageBottom),
                m.component(footer)
            ];
    };

    return mainPage;
});