{% extends 'mainapp/base.html' %}

{% block static %}
    <script type="text/javascript" src="/static/js/news.js"></script>
    <script type="text/javascript" src="/static/js/match.js"></script>
{% endblock %}

{% block title %}
    {% if league is not none %}{{ league.name }}{% elif sport is not none %}{{ sport.name }}{% else %}Accueil{% endif %}
{% endblock %}

{% block tabs %}
    <ul class="nav nav-tabs nav-justified pt-1" id="pageTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link font-weight-bold border-top-0 border-left-0 border-right-0 active show" id="news-tab" data-toggle="tab" href="#news" role="tab" aria-controls="news" aria-selected="true">
                <i class="fas fa-newspaper"></i>
                <span class="d-none d-sm-inline">Actualités</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link font-weight-bold border-top-0 border-left-0 border-right-0" id="match-tab" data-toggle="tab" href="#match" role="tab" aria-controls="match" aria-selected="false">
                <i class="fas fa-calendar-alt"></i>
                <span class="d-none d-sm-inline">Calendrier</span>
            </a>
        </li>
    </ul>
{% endblock %}

{% block content %}
    <div class="tab-content" id="pageTabContent">
        <div class="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="news-tab">
            <!-- FILLED WITH AJAX -->
        </div>
        <div class="tab-pane fade" id="match" role="tabpanel" aria-labelledby="profile-tab">
            <button id="matchPrevious" class="text-center py-1 bg-info w-100 text-muted">
                <i class="fas fa-angle-double-up mr-4"></i>
                <span class="labelContainer"><span class="label"></span></span>
                <i class="fas fa-angle-double-up ml-4"></i>
            </button>
            <!-- FILLED WITH AJAX -->
            <button id="matchNext" class="text-center py-1 bg-info w-100 text-muted">
                <i class="fas fa-angle-double-down mr-4"></i>
                <span class="labelContainer"><span class="label"></span></span>
                <i class="fas fa-angle-double-down ml-4"></i>
            </button>
        </div>
    </div>

    <script>
        let scrollLock = true;
        let sportId = {% if sport is not none %} "{{ sport.id }}" {% else %} null {% endif %};
        let leagueId = {% if league is not none %} "{{ league.id }}" {% else %} null {% endif %};

        let search = {% if search is not none %} "{{ search }}" {% else %} null {% endif %};
        let tag = {% if tag is not none %} "{{ tag }}" {% else %} null {% endif %};
        let offsetId = null;

        let matchInterval = leagueId === null ? "day" : "week";
        let topStartDate = moment().startOf(matchInterval);
        let topEndDate = moment().endOf(matchInterval);
        let bottomStartDate = moment().startOf(matchInterval);
        let bottomEndDate = moment().endOf(matchInterval);

        if (leagueId) {
            $("#matchPrevious .label").first().text("semaine précédente");
            $("#matchNext .label").first().text("semaine suivante");
        } else {
            $("#matchPrevious .label").first().text("jour précédent");
            $("#matchNext .label").first().text("jour suivant");
        }

        $(document).ready(function() {
            News.displayNewsList(sportId, leagueId, search, tag, offsetId, 10);
            Match.displayMatchList(sportId, leagueId, bottomStartDate, bottomEndDate, "bottom");
        });

        $(window).on("scroll", function() {
            if (scrollLock) {
                return;
            }
            if ($(document).height() - $(window).height() - $(window).scrollTop() < 50) {
                scrollLock = true;
                if ($("#news").hasClass("active")) {
                    offsetId = parseInt($("#content .card").last().attr("id").replace("news-", ""));
                    News.displayNewsList(sportId, leagueId, search, tag, offsetId, 10);
                } else if ($("#match").hasClass("active")) {
                    bottomStartDate.add(1, matchInterval);
                    bottomEndDate.add(1, matchInterval);
                    Match.displayMatchList(sportId, leagueId, bottomStartDate, bottomEndDate, "bottom");
                } else {
                    scrollLock = false;
                }
            }
            if ($(window).scrollTop() === 0) {
                scrollLock = true;
                if ($("#match").hasClass("active")) {
                    topStartDate.add(-1, matchInterval);
                    topEndDate.add(-1, matchInterval);
                    Match.displayMatchList(sportId, leagueId, topStartDate, topEndDate, "top");
                } else {
                    scrollLock = false;
                }
            }
        });

        $("#matchPrevious").on("click", function() {
            if (scrollLock) {
                return;
            }
            scrollLock = true;
            topStartDate.add(-1, matchInterval);
            topEndDate.add(-1, matchInterval);
            Match.displayMatchList(sportId, leagueId, topStartDate, topEndDate, "top");
        });

        $("#matchNext").on("click", function() {
            if (scrollLock) {
                return;
            }
            scrollLock = true;
            bottomStartDate.add(1, matchInterval);
            bottomEndDate.add(1, matchInterval);
            Match.displayMatchList(sportId, leagueId, bottomStartDate, bottomEndDate, "bottom");
        });
    </script>
{% endblock %}