let App = () => {};

App.prototype = function(){

    const matchday = $('.matchday');
    let timestamp = '';
    let isGalleryInit = false;
    let gallery = $('.main-gallery');
    let basicNavView = $('.match-day-nav-main .match-day-nav-li.active').data('id');
    const matchStatus = {
        0: {
            img: 'view/basic/images/matchday/icons/comment.png'
        },
        1: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        2: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        3: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        4: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        5: {
            img: 'view/basic/images/matchday/icons/gol.png'
        },
        6: {
            img: 'view/basic/images/matchday/icons/zoltak.png'
        },
        7: {
            img: 'view/basic/images/matchday/icons/czerwonak.png'
        },
        8: {
            img: 'view/basic/images/matchday/icons/zmiana.png'
        },
        9: {
            img: 'view/basic/images/matchday/icons/wykrz.png'
        },
        10: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        11: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        12: {
            img: 'view/basic/images/matchday/icons/rzuty_karne.png'
        },
        13: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        14: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        15: {
            img: 'view/basic/images/matchday/icons/czas.png'
        },
        16: {
            img: 'view/basic/images/matchday/icons/foto.png'
        },

    };

    let init = () => {
        initApi();
        initTimeLine();
        matchDayNav();
        initResize();
        resizeMainContent();
    };


    let resizeMainContent = () => {
        $(window).on('load', function(){
            let m = $('.match-day-main');
            if(m[0].clientHeight > 1000){
                $('.more-match-day-main, .match-day-main-container').addClass('active');
            }
        });
        $(document).on('click', '.btn-match-day-main', function(){
            $('.more-match-day-main, .match-day-main-container').removeClass('active');
        });
    };


    let initTimeLine = () => {
        $(document).on('click', '.btn-more' , function(){
            $(this).toggleClass('active');
            $('.time-line').slideToggle(400);
        });
    };

    let initResize = () => {
        let tempWidth = 0;
        $(window).on('resize', function(){
            let currentWidth = $(window).innerWidth();
            if(currentWidth !== tempWidth){
                if (currentWidth < 1000) {
                    changeView('live');
                } else {
                    //changeView('team');
                    changeView(basicNavView);
                }
            }
            tempWidth = currentWidth;
        }).resize();

    };

    let matchDayNav = () => {
        $(document).on('click', '.match-day-nav-li', function(){
            let id = $(this).data('id');
            changeView(id);
        });
        $(document).on('click', '.view-nav li', function(){
            let t = $(this);
            let id = t.data('id');
            t.closest('.view').find('.view-content.active, .view-nav li.active').removeClass('active');
            t.closest('.view').find('.view-content-' + id + ', .view-nav li[data-id="' + id + '"]').addClass('active');
        });
    };

    let changeView = (id) => {
        $('.view.active, .match-day-nav-li.active').removeClass('active');
        $('.view--' + id).addClass('active');
        $('.match-day-nav-li[data-id='+id+']').addClass('active');
    };

    let initApi = () => {
        API.get('/matchday/' + matchday.data('id') + '/progress')
            .then( (response) => {
                let data = response.data.data;
                timestamp = response.data.data.timestamp;
                updateView(data);
                reloadView();
            })
            .catch( (error) => {
                console.log( 'API err', error );
            })
    };

    let reloadView = () => {
        if( !matchday.data('archive') ) {
            setTimeout(function () {
                API.get('/matchday/' + matchday.data('id') + '/progress/' + timestamp)
                    .then((response) => {
                        let data = response.data.data;
                        timestamp = response.data.data.timestamp;
                        updateView(data);
                    })
                    .catch((error) => {
                        console.log('API err', error);
                    });
                reloadView();
            }, 60000);
        }
    };

    let updateView = (data) => {
        changeMatchTime(data);
        updateTickets(data);
        updateTeam(data.host_team, data.guest_team);
        addFeed(data.feed);
        addNews(data.news);
        changeStats(data.stats);
        addToTimeLine(data.timeline);
        addGallery(data.gallery);
    };

    let updateTeam = (host_team, guest_team) => {
        if( $('.view--team .view-content-1 .player').length === 0 ) {
            if (host_team != null) {
                if (host_team.players.length > 0) {
                    let html = '<div class="team-composition"><p><b>Wyjściowa jedenastka</b> ('+host_team.setup+')</p></div>';
                    let reserve_separator = false;
                    let i = 0;
                    for( let arrpos=0; arrpos<host_team.players.length; arrpos++ ){
                        let player = host_team.players[arrpos];
                        if( player.is_reserve && !reserve_separator ){
                            reserve_separator = true;
                            html += '<div class="team-composition"><p><b>Rezerwowi</b></p></div>';
                        }
                        html += '<div class="player player--host-'+player.players_id;
                        if (i === 0 || player.position_id !== i){
                            html += ' active';
                            i = player.position_id;
                        }
                        html += '" data-id="'+player.players_id+'"><div class="player__content"><div class="player__img"><img src="'+player.img+'?width=43" alt=""></div><div class="player__nr"><p>'+player.nr+'</p></div><div class="player__name"><p class="fname">'+player.first_name+'</p><p><b class="lname">'+player.last_name+'</b></p></div><div class="player__icons"></div></div></div>';
                    }
                    $('.view--team .view-content-1').html(html);
                }
            }
        }

        if( $('.view--team .view-content-2 .player').length === 0 ) {
            if (guest_team != null) {
                if (guest_team.players.length > 0) {
                    let html = '<div class="team-composition"><p><b>Wyjściowa jedenastka</b> ('+guest_team.setup+')</p></div>';
                    let reserve_separator = false;
                    let i = 0;
                    for( let arrpos=0; arrpos<guest_team.players.length; arrpos++ ){
                        let player = guest_team.players[arrpos];
                        if( player.is_reserve && !reserve_separator ){
                            reserve_separator = true;
                            html += '<div class="team-composition"><p><b>Rezerwowi</b></p></div>';
                        }
                        html += '<div class="player player--guest-'+player.players_id;
                        if (i === 0 || player.position_id !== i){
                            html += ' active';
                            i = player.position_id;
                        }
                        html += '" data-id="'+player.players_id+'"><div class="player__content"><div class="player__img"><img src="'+player.img+'?width=43" alt=""></div><div class="player__nr"><p>'+player.nr+'</p></div><div class="player__name"><p class="fname">'+player.first_name+'</p><p><b class="lname">'+player.last_name+'</b></p></div><div class="player__icons"></div></div></div>';
                    }
                    $('.view--team .view-content-2').html(html);
                }
            }
        }
    };

    let changeMatchTime = (data) => {
        if(data.match_time === null){
            $('.js-match_countdown').text(data.match_countdown);
        }else{
            $('.js-match-time').html('');
            let view = $('.template-match-time').last().clone();
            view.find('.js-span-time').text(data.match_time + "'");
            view.find('.js-p-time').text(data.match_score);
            view.show().prependTo('.js-match-time');
        }
    };

    let updateTickets = (data) => {
        $('.tickets_count').text(data.tickets_count);
    };

    let createNewsGallery = (data) => {
        if(data.length > 0){
            let html = '<div class="owl-gallery"><div class="owl-carousel feed-gallery owl-theme">';
            data.forEach(function(d) {
                html += '<div class="item"><a href="' + d.file + '?width=1920" data-rel="gallery" data-title="" data-author="" data-share="' + d.file + '" class="Swipebox"><img src="' + d.file + '?width=467&height=255&crop=true" alt=""></a></div>';
            });
            html += '</div></div>';
            return html;
        }else{
            return '';
        }
    };

    let addGallery = (data) => {
        if(data.length > 0){
            if(!isGalleryInit){
                let html = '';
                data.forEach(function(d) {
                    html += '<div class="item"><a href="' + d.file + '?width=1920" style="background-image: url(' + d.file + '?width=300)" data-rel="gallery" data-title="-" data-author="-" data-share="' + d.file + '" class="Swipebox"></a></div>';
                });
                $('.main-gallery').prepend(html);
                setTimeout(function(){

                    $('.main-gallery a.Swipebox').swipebox({
                        useSVG									: true,
                        useMousewheel						: false,
                        useImageBackground			: false,
                        loopAtEnd								: false,
                        removeBarsOnMobile			: false,
                        hideCloseButtonOnMobile	: false,
                        initialIndexOnArray			: 0,
                        hideBarsDelay						: 5000,
                        mousewheelDelay					: 1000,
                        beforeOpen							: null,
                        afterOpen								: null,
                        afterClose							: null,
                        nextSlide								: null,
                        prevSlide								: null
                    });

                    gallery.owlCarousel({
                        loop: true,
                        center: true,
                        items: 1,
                        autoplay: true,
                        smartSpeed: 1000,
                        responsive:{
                            600:{
                                items:3
                            }
                        },
                        onInitialized: function(){
                            isGalleryInit = true;
                        }
                    });
                },100);
            }else{
                data.forEach(function(d) {
                    let html = '<div class="item"><a href="' + d.file + '?width=1920" style="background-image: url(' + d.file + '?width=300)" data-rel="gallery" data-title="-" data-author="-" data-share="' + d.file + '" class="Swipebox"></a></div>';
                    gallery.owlCarousel('add', html).owlCarousel('update');
                });

            }

        }

    };

    let addFeed = (data) => {
        if(data.length > 0){
            data.forEach(function(d) {
                if(d.matchdays_events_id === 5){
                    let team = d.guest_teams_id === 0 ? 'host' : 'guest';
                    let player = checkPlayer(team, d.guest_teams_id === 0 ? d.host_players_id : d.guest_players_id);
                    let bg = 'view/basic/images/matchday/gol-'+( (d.host_teams_id === 1 || d.guest_teams_id === 1 ) ? 'host' : 'guest')+'.png';
                    $('.view--live').prepend('<div class="post--gol" style="background-image: url('+bg+');"><div class="gol-img"><img src="'+player.img+'" alt=""></div><div class="gol-content"><p class="gol-time">'+d.match_time+' minuta</p><p class="gol-text">'+(d.title!==''?d.title:'&nbsp;')+'</p><p class="gol-name"><b>'+player.first_name+' '+player.last_name+'</b></p></div></div>');
                }else{
                    let aDate = null;
                    if( d.date_time != null && d.date_time !== '0000-00-00 00:00:00' ){
                        let t = d.date_time.split(/[- :]/);
                        aDate = new Date(t[0], t[1] - 1, t[2], t[3], t[4], t[5]);
                    }

                    let view = $('.js-feed').last().clone();
                    view.attr('data-pinned', d.pinned);
                    view.find('img').attr('src', matchStatus[d.matchdays_events_id].img);
                    view.find('span').html(aDate===null ? d.match_time + "'" : (aDate.getHours() < 10 ? '0' + aDate.getHours() : aDate.getHours()) + ":" + (aDate.getMinutes() < 10 ? '0' + aDate.getMinutes() : aDate.getMinutes()));
                    if( d.title !== '' ) {
                        view.find('h5').removeClass('hidden').text(d.title);
                    }else{
                        view.find('h5').addClass('hidden');
                    }
                    if( d.matchdays_events_id === 7 ){
                        view.addClass('red');
                    }else{
                        view.removeClass('red');
                    }
                    if( d.txt.indexOf('iframe') > -1 || d.txt.indexOf('fb-post') > -1 || d.txt.indexOf('twitter-tweet') > -1 ){
                        view.addClass('no-border');
                    }else{
                        view.removeClass('no-border');
                    }
                    view.find('.text').append(d.txt);

                    if(d.gallery){
                        view.find('.text').append(createNewsGallery(d.gallery));
                        setTimeout(function(){

                            view.find('.text a.Swipebox').swipebox({
                                useSVG									: true,
                                useMousewheel						: false,
                                useImageBackground			: false,
                                loopAtEnd								: false,
                                removeBarsOnMobile			: false,
                                hideCloseButtonOnMobile	: false,
                                initialIndexOnArray			: 0,
                                hideBarsDelay						: 5000,
                                mousewheelDelay					: 1000,
                                beforeOpen							: null,
                                afterOpen								: null,
                                afterClose							: null,
                                nextSlide								: null,
                                prevSlide								: null
                            });

                            $('.feed-gallery').owlCarousel({
                                loop: true,
                                items: 1,
                                autoplay: true,
                                smartSpeed: 1000
                            });
                        },100);

                    }

                    if( d.outUrl !== '' ){
                        if( d._blank == 1 ) {
                            view.find('.text').append('<div class="Pagination"><a href="' + d.outUrl + '" target="_blank" class="itemDefault Next"><span class="Data"><span class="Info"><b>Więcej</b></span></span></a></div>');
                        }else{
                            view.find('.text').append('<div class="Pagination"><a href="' + d.outUrl + '" class="itemDefault Next"><span class="Data"><span class="Info"><b>Więcej</b></span></span></a></div>');
                        }
                    }else if( d.url !== '' ){
                        view.find('.text').append( '<div class="Pagination"><a href="'+d.url+'" class="itemDefault Next"><span class="Data"><span class="Info"><b>Więcej</b></span></span></a></div>' );
                    }

                    view.css('display', 'flex');

                    const $lastPinned = $('.view--live [data-pinned="1"]').last();
                    if( d.pinned === 0 && $lastPinned.length > 0 ){
                        view.insertAfter($lastPinned);
                    }else{
                        view.prependTo('.view--live');
                    }

                    view.find('.text').responsiveIframe();
                }
            });

        }
    };

    let addNews = (data) => {
        if(data.length > 0){
            data.forEach(function(d) {
                let view = $('.js-news').last().clone();
                if( d.outUrl !== '' ){
                    view.find('a').attr('href', d.outUrl);
                    if( d._blank === 1 ) {
                        view.find('a').attr('target', "_blank");
                    }else{
                        view.find('a').removeAttr('target');
                    }
                }else {
                    view.find('a').attr('href', d.url);
                    view.find('a').removeAttr('target');
                }
                view.find('.change_me').attr('class', d.showAsVideo === 0 ? 'Image' : 'Video');
                view.find('img').attr('src', d.head);
                view.find('ins').text(d.publication);
                view.find('.Title b').text(d.title);
                view.show().appendTo('.view--news ul');
            });
        }
    };

    let changeStats = (data) => {
        if(data){
            let table = '';
            data.forEach(function(d) {

                table += '<tr><td>' + (isNaN(d.host_team_value) ? d.host_team_value : Math.round(d.host_team_value).toFixed(0)) + '</td><td>' + d.stats_name + '</td><td>' + (isNaN(d.guest_team_value) ? d.guest_team_value : Math.round(d.guest_team_value).toFixed(0)) + '</td></tr>';
            });
            $('.view--statistics tbody').html(table);
        }
    };

    let checkPlayer = (team, id) => {
        let tab = team === 'host' ? window.matchday.host_team.players : window.matchday.guest_team.players;
        for(let i = 0; i < tab.length; i++){
            if(tab[i].players_id === id){
                return tab[i];
            }
        }
        return {
            id: 0,
            img: 'view/basic/images/fake/260x390_player.png',
            first_name: '',
            last_name: '',
        }
    };

    let buildTimeLineEvent = (team, text, position, guestImg) => {
        let view = $('.js-time-line').last().clone();
        view.addClass(team);
        view.attr('style', 'left:'+position+'%');
        view.find('p').html(text);
        view.find('img').attr('src', guestImg);
        view.show().prependTo('.time-line__content');
        
        if(position >= 93) {
            view.find('p').addClass('almost-end-event');
        }
    };

    let addIconsToPlayers = (team, id, icoSrc, title) => {
        $('.player--'+team+'-'+id).find('.player__icons').prepend('<img src="'+icoSrc+'" alt="'+title+'" title="'+title+'">');
    };

    let addToTimeLine = (data) => {
        let guestImgQuantity = 0;
        let hostImgQuantity = 0;
        if(data.length > 0){
            data.forEach(function(d) {
                let guest = '';
                let guestImg = '';
                let host = '';
                let hostImg = '';
                let timeOut = false;
                d.events.forEach(function(m) {
                    m.match_time > 90 ? timeOut = true : '';
                   if(m.guest_teams_id === 0){
                       let p2_text = '';
                       let p1 = checkPlayer('host', m.host_players_id);
                       let p2 = m.host_players_id2 !== 0 ? checkPlayer('host', m.host_players_id2) : null;
                       hostImg = matchStatus[m.matchdays_events_id].img;
                       hostImgQuantity++;
                       if(p2){
                           p2_text = p2.first_name + ' ' + p2.last_name + '<br/>';
                           addIconsToPlayers('host', p2.players_id, hostImg, m.title);
                       }
                       host += '<span><b>'+ m.match_time +"'</b><br/>" + p1.first_name + ' ' + p1.last_name + '<br/>' + p2_text + '<b>' + m.title + '</b></span>'
                       addIconsToPlayers('host', p1.players_id, hostImg, m.title);
                   }else{
                       let g2_text = '';
                       let g1 = checkPlayer('guest', m.guest_players_id);
                       let g2 = m.guest_players_id2 !== 0 ? checkPlayer('guest', m.guest_players_id2) : null;
                       guestImg = matchStatus[m.matchdays_events_id].img;
                       guestImgQuantity++;
                       if(g2){
                           g2_text = g2.first_name + ' ' + g2.last_name + '<br/>';
                           addIconsToPlayers('guest', g2.players_id, guestImg, m.title);
                       }
                       guest += '<span><b>'+ m.match_time +"'</b><br/>" + g1.first_name + ' ' + g1.last_name + '<br/>' + g2_text + '<b>' + m.title + '</b></span>';
                       addIconsToPlayers('guest', g1.players_id, guestImg, m.title);
                   }
                });
                //if(!timeOut){
                    if(host !== ''){
                        buildTimeLineEvent('host', host, d.position, hostImgQuantity === 1 ? hostImg : matchStatus[0].img);
                        hostImgQuantity = 0;
                    }
                    if(guest !== ''){
                        buildTimeLineEvent('guest', guest, d.position, guestImgQuantity === 1 ? guestImg : matchStatus[0].img);
                        guestImgQuantity = 0;
                    }
                //}

            });
        }
    };













    return {
        init: init,
    }

}();

$(function(){

    App.prototype.init();
});