{% extends "../templates/basic.njk" %}
{% import "../components/_map.njk" as mapComponent %}
{% import "../components/_utils.njk" as utils %}
{% set map = data.map %}
{% set raceLeaderboard = data.raceLeaderboard %}
{% set teamLeaderboard = data.teamLeaderboard %}
{% set graphMap = data.graphMap %}

{% block head %}
    <title>DDStats - {{ map.map }}</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
    <script src="/assets/scripts/lazyLoadImages.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
{% endblock %}

{% block body %}
    <main class="flex-container">
        <div class="map map-detailed">
            <img class="map-image" src="https://ddnet.tw/ranks/maps/{{ map.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
            <h1 class="map-name">{{ map.map }}</h1>
            <table class="map-info">
                <tr>
                    <td>
                        {% if map.mappers[1] %}
                            Mappers:
                        {% else %}
                            Mapper:
                        {% endif %}
                    </td>
                    <td>
                        {{ map.mappers.join(", ") }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Category:
                    </td>
                    <td>
                        {{ map.category }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Rating:
                    </td>
                    <td>
                        {% for i in range(0, map.stars) %}★{% endfor %}
                        {% for i in range(0, 5 - map.stars) %}☆{% endfor %}
                    </td>
                </tr>
                <tr>
                    <td>
                        Points:
                    </td>
                    <td>
                        {{ map.points }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Released:
                    </td>
                    <td>
                        {{ map.release }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Total finishes:
                    </td>
                    <td>
                        {{ map.finishes.total }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Team finishes: 
                    </td>
                    <td>
                        {{ map.finishes.team }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Unique finishes:
                    </td>
                    <td>
                        {{ map.finishes.unique }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Median time: 
                    </td>
                    <td>
                        {{ utils.fancyTime(map.times.median) }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Average time:
                    </td>
                    <td>
                        {{ utils.fancyTime(map.times.average) }}
                    </td>
                </tr>
            </table>
        </div>


        <div class="leaderboard">
            <h2> Records! </h2>
            {% for record in raceLeaderboard %}
                <div class="rank">
                    <img class="country-image" data-src="https://ddnet.tw/countryflags/{%if record.server %}{{record.server}}{%else%}UNK{%endif%}.png">
                    <p class="rank-position">{{ record.rank }}.</p>
                    <p class="rank-player">{{ record.player }}</p>
                    <p class="rank-time">{{ utils.fancyTime(record.time) }}</p>
                </div>
            {% endfor %}
        </div>
        {% if map.finishes.team %}
            <div class="leaderboard">
                <h2> Team records! </h2>
                {% for record in teamLeaderboard %}
                    <div class="rank">
                        <img class="country-image" data-src="https://ddnet.tw/countryflags/{%if record.server %}{{record.server}}{%else%}UNK{%endif%}.png">
                        <p class="rank-position">{{ record.teamrank }}.</p>
                        <p class="rank-player">{{ record.players.join(", ") }}</p>
                        <p class="rank-time">{{ utils.fancyTime(record.time) }}</p>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
        <div class="leaderboard-history">
            <h1> Record over time </h1>
            <div class="container">
            <canvas id="chart"></canvas>
            </div> 
            <script>
            const ctx = document.getElementById("chart").getContext("2d");
            const graph = {{ data.graphMap | dump | safe }}
            const map = "{{ map.map | safe }}"

            Chart.defaults.global.defaultFontFamily = "Manrope Regular"
            Chart.defaults.global.defaultFontColor = "#9090AF"

            console.log(Chart.defaults)
            const myChart = new Chart(ctx, {
                type: 'line',
                options: {
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    hover: {
                        mode: 'index',
                        intersect: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: true,
                                color: "#50506F"
                            },
                            type: 'time',
                            time: {
                                unit: 'year'
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: true,
                                color: "#50506F"
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Time (seconds)'
                            }
                        }]
                    },
                    elements: {
                        point: {
                            radius: 0
                        },
                        line: {
                            fill: false
                        }
                    },
                },
                data: {
                    datasets: [{
                        label: map,
                        data: graph,
                        color: [
                            '#EE588F'
                        ],
                        borderColor: [
                            '#FBA7C6'
                        ],
                        borderWidth: 3,
                        lineTension: 0
                    }]
                }
            })
            </script>
        </div>
    </main>
{% endblock %}