<%# Page for displaying stats %>
<%# ARGUMENTS: user - user object for which stats are being displayed, totalTags - list of all tags on site,
    analytics - a list of analytics about the user, userLevel - user's experience data %>

<%- include("../partials/header") -%>
<%- include("../partials/navigationPrivate") -%>

<script>

    $(document).ready(function() {
        
        $("#experience-indicator").fadeTo(0, 0.7);
        $("#experience-bar").on({
            mouseenter: function() {
                $("#experience-indicator").fadeTo(200, 1);
            },
            mouseleave: function() {
                $("#experience-indicator").fadeTo(200, 0.7);
            }
        });

        let physicsRating = parseInt("<%= user.rating.physics %>");
        let chemistryRating = parseInt("<%= user.rating.chemistry %>");
        let biologyRating = parseInt("<%= user.rating.biology %>");
        let essRating = parseInt("<%= user.rating.ess %>");
        let usaboRating = parseInt("<%= user.rating.usabo %>");
        let experience = parseInt("<%= user.stats.experience ? user.stats.experience : 0 %>");
        let rushHighscore = parseInt("<%= user.stats.rush.highscore ? user.stats.rush.highscore : 0 %>");

        $.get("/statsAdditional", { physicsRating, chemistryRating, biologyRating, essRating, usaboRating, experience, rushHighscore }, (data) => {
                
            if(data.status == "Success") {
                
                $("#physics-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.physics + '</font>');
                $("#chemistry-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.chemistry + '</font>');
                $("#biology-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.biology + '</font>');
                $("#ess-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.ess + '</font>');
                $("#usabo-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.usabo + '</font>');
                $("#experience-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.experience + '</font>');
                $("#rush-global-rank").html('Global Rank: <font color="blue">#' + data.globalRank.rush + '</font>');
            }
        });
    });

    window.onload = function () {

        // render correct/wrong chart

        Chart.pluginService.register({
            beforeDraw: function (chart) {

                if(chart.config.options.correctwrongPlugin) {

                    var width = chart.chart.width;
                    var height = chart.chart.height;
                    var ctx = chart.chart.ctx;

                    ctx.restore();

                    var fontSize = "1.5";
                    ctx.font = fontSize + "em sans-serif";

                    ctx.fillStyle = "#8d0f0f";
                    var text = "Wrong: <%= user.stats.correct+user.stats.wrong != 0 ? Math.round(100*(user.stats.wrong)/(user.stats.correct+user.stats.wrong)) : 0  %>%";
                    var textX = Math.round((width - ctx.measureText(text).width) / 2);
                    var textY = (height/2) + 25;
                    ctx.fillText(text, textX, textY);

                    ctx.fillStyle = "#208d0f";
                    text = "Correct: <%= user.stats.correct+user.stats.wrong != 0 ? Math.round(100*(user.stats.correct)/(user.stats.correct+user.stats.wrong)) : 0 %>%";
                    textX = Math.round((width - ctx.measureText(text).width) / 2);
                    textY -= 30;
                    ctx.fillText(text, textX, textY);

                    ctx.save();
                }
            }
        });

        var ctxPassrate = document.getElementById("correctWrongChart");

        var style = ctxPassrate.style;
        style.marginLeft = "auto";
        style.marginRight = "auto";

        var myChart = new Chart(ctxPassrate, {
            type: "pie",
            data: {
                labels: ["Correct", "Wrong"],
                datasets: [{
                    label: "User Correct/Wrong Counts",
                    data: [$("#correctcount").val()+$("#wrongcount").val() != 0 ? $("#correctcount").val() : 1, $("#wrongcount").val()],
                    backgroundColor: [
                        "rgba(80, 185, 20, 1)",
                        "rgba(215, 80, 80, 1)"
                    ],
                    hoverBackgroundColor: [
                        "rgba(80, 185, 20, 1)",
                        "rgba(215, 80, 80, 1)"
                    ],
                    borderColor: [
                        "rgba(255, 255, 255, 0.5)",
                        "rgba(255, 255, 255, 0.5)"
                    ],
                    borderWidth: 2
                }]
            },
            options: {
                correctwrongPlugin: true,
                title: {
                    display: true,
                    text: "User Correct/Wrong Counts"
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 60,
                responsive: true
            }
        });

        // render rating tracker charts

        ["Physics", "Chemistry", "Biology", "ESS", "USABO"].forEach((subject) => {

            var ctxTracker = document.getElementById("ratingTrackerChart-" + subject);

            var style = ctxTracker.style;
            style.marginLeft = "auto";
            style.marginRight = "auto";

            var tracker = $("#ratingTrackerArray-" + subject).val().split('@');
            if(tracker.length < 2) {
                tracker.unshift(tracker[0]);
            }
            var labels = [];
            for(var i = tracker.length; i > 0; i--) {
                labels.push(i + " Problems Ago");
            }
            labels.push("");

            let color = (subject == "Physics") ? "rgba(100, 200, 230, 1)" :
                        (subject == "Chemistry") ? "rgba(245, 170, 40, 1)" :
                        (subject == "Biology") ? "rgba(40, 240, 110, 1)" :
                        (subject == "ESS") ? "rgba(184, 150, 191, 1)" :
                            "rgba(113, 16, 1, 1)";

            var myChart = new Chart(ctxTracker, {
                type: "line",
                data: {
                    labels: labels,
                    datasets: [{
                        label: "Rating History",
                        data: tracker,
                        backgroundColor: color,
                        borderColor: color,
                        fill: false,
                        borderWidth: 5
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: subject + " Rating Tracker"
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                min: Math.round((Math.min.apply(null, tracker)-50)/50)*50,
                                max: Math.round((Math.max.apply(null, tracker)+50)/50)*50,
                                stepSize: 50
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                display: false
                            }
                        }]
                    },
                    responsive: true
                }
            });

        });

    }

</script>

<h1 class="my-5 container display-3"><strong><a target="_blank" href="/profile/<%= user.ign %>" style="text-decoration: none;"><%= user.ign %></a></strong>'s Stats</h1>

<div class="container jumbotron mt-5">

    <div class="row">

        <div class="col-12 col-lg-7">

            <h3 class="display-4">Physics: <font color="green"><%= user.rating.physics != -1 ? user.rating.physics : "Unrated" %></font></h3>

            <h2 class="mt-3" id="physics-global-rank">Global Rank: XXX</h2>

            <h5 class="mt-3">Collected Physics Tags:</h5>
            <% var counter = 0; %>
            <% user.stats.collectedTags.forEach((tag) => { %>
                <% counter++; %>
                <% if(Object.keys(totalTags["Physics"]["Units"]).includes(tag)) { %>
                    <button class="btn btn-primary btn-sm my-1" disabled><%= tag %></button>
                <% } else if(Object.keys(totalTags["Physics"]["Concepts"]).includes(tag)) { %>
                    <button class="btn btn-info btn-sm my-1" disabled><%= tag %></button>
                <% } else { %>
                    <% counter--; %>
                <% } %>
            <% }); %>

            <% if(counter == 0) { %>
                <p>0 out of <%= Object.keys(totalTags["Physics"]["Units"]).length + Object.keys(totalTags["Physics"]["Concepts"]).length %> possible tags</p>
            <% } else { %>
                <p><%= counter %>/<%= Object.keys(totalTags["Physics"]["Units"]).length + Object.keys(totalTags["Physics"]["Concepts"]).length %> tags in this subject have been collected</p>
            <% } %>

            <% if(analytics.strengths.physics.length > 0) { %>
                <h3 class="mt-3">Areas of Mastery:</h3>
                <h3>
                    <% analytics.strengths.physics.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.studying.physics.length > 0) { %>
                <h3 class="mt-3">Currently Studying:</h3>
                <h3>
                    <% analytics.studying.physics.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.weaknesses.physics.length > 0) { %>
                <h3 class="mt-3">Recommended Training:</h3>
                <h3>
                    <% analytics.weaknesses.physics.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.favorites.physics.length > 0) { %>
                <h3 class="mt-3">Favorite Units:</h3>
                <h3>
                    <% analytics.favorites.physics.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

        </div>

        <div class="col-12 col-lg-5">

            <div class="canvas-container-center text-center">
                <canvas id="ratingTrackerChart-Physics" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="ratingTrackerArray-Physics" value="<%= user.stats.ratingTracker.physics.join('@') %>">

        </div>

    </div>
    <a href="/train/physics/proficiency" class="btn btn-primary w-100 btn-lg mt-4">Change Physics Proficiency</a>
</div>

<div class="container jumbotron">

    <div class="row">

        <div class="col-12 col-lg-7">

            <h3 class="display-4">Chemistry: <font color="green"><%= user.rating.chemistry != -1 ? user.rating.chemistry : "Unrated" %></font></h3>

            <h2 class="mt-3" id="chemistry-global-rank">Global Rank: XXX</h2>

            <h5 class="mt-3">Collected Chemistry Tags:</h5>
            <% var counter = 0; %>
            <% user.stats.collectedTags.forEach((tag) => { %>
                <% counter++; %>
                <% if(Object.keys(totalTags["Chemistry"]["Units"]).includes(tag)) { %>
                    <button class="btn btn-primary btn-sm my-1" disabled><%= tag %></button>
                <% } else if(Object.keys(totalTags["Chemistry"]["Concepts"]).includes(tag)) { %>
                    <button class="btn btn-info btn-sm my-1" disabled><%= tag %></button>
                <% } else { %>
                    <% counter--; %>
                <% } %>
            <% }); %>

            <% if(counter == 0) { %>
                <p>0 out of <%= Object.keys(totalTags["Chemistry"]["Units"]).length + Object.keys(totalTags["Chemistry"]["Concepts"]).length %> possible tags</p>
            <% } else { %>
                <p><%= counter %>/<%= Object.keys(totalTags["Chemistry"]["Units"]).length + Object.keys(totalTags["Chemistry"]["Concepts"]).length %> tags in this subject have been collected</p>
            <% } %>

            <% if(analytics.strengths.chemistry.length > 0) { %>
                <h3 class="mt-3">Areas of Mastery:</h3>
                <h3>
                    <% analytics.strengths.chemistry.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.studying.chemistry.length > 0) { %>
                <h3 class="mt-3">Currently Studying:</h3>
                <h3>
                    <% analytics.studying.chemistry.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.weaknesses.chemistry.length > 0) { %>
                <h3 class="mt-3">Recommended Training:</h3>
                <h3>
                    <% analytics.weaknesses.chemistry.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.favorites.chemistry.length > 0) { %>
                <h3 class="mt-3">Favorite Units:</h3>
                <h3>
                    <% analytics.favorites.chemistry.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

        </div>

        <div class="col-12 col-lg-5">

            <div class="canvas-container-center text-center">
                <canvas id="ratingTrackerChart-Chemistry" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="ratingTrackerArray-Chemistry" value="<%= user.stats.ratingTracker.chemistry.join('@') %>">

        </div>

    </div>
    <a href="/train/chemistry/proficiency" class="btn btn-primary w-100 btn-lg mt-4">Change Chemistry Proficiency</a>
</div>

<div class="container jumbotron mb-5">

    <div class="row">

        <div class="col-12 col-lg-7">

            <h3 class="display-4">Biology: <font color="green"><%= user.rating.biology != -1 ? user.rating.biology : "Unrated" %></font></h3>

            <h2 class="mt-3" id="biology-global-rank">Global Rank: XXX</h2>

            <h5 class="mt-3">Collected Biology Tags:</h5>
            <% var counter = 0; %>
            <% user.stats.collectedTags.forEach((tag) => { %>
                <% counter++; %>
                <% if(Object.keys(totalTags["Biology"]["Units"]).includes(tag)) { %>
                    <button class="btn btn-primary btn-sm my-1" disabled><%= tag %></button>
                <% } else if(Object.keys(totalTags["Biology"]["Concepts"]).includes(tag)) { %>
                    <button class="btn btn-info btn-sm my-1" disabled><%= tag %></button>
                <% } else { %>
                    <% counter--; %>
                <% } %>
            <% }); %>

            <% if(counter == 0) { %>
                <p>0 out of <%= Object.keys(totalTags["Biology"]["Units"]).length + Object.keys(totalTags["Biology"]["Concepts"]).length %> possible tags</p>
            <% } else { %>
                <p><%= counter %>/<%= Object.keys(totalTags["Biology"]["Units"]).length + Object.keys(totalTags["Biology"]["Concepts"]).length %> tags in this subject have been collected</p>
            <% } %>

            <% if(analytics.strengths.biology.length > 0) { %>
                <h3 class="mt-3">Areas of Mastery:</h3>
                <h3>
                    <% analytics.strengths.biology.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.studying.biology.length > 0) { %>
                <h3 class="mt-3">Currently Studying:</h3>
                <h3>
                    <% analytics.studying.biology.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.weaknesses.biology.length > 0) { %>
                <h3 class="mt-3">Recommended Training:</h3>
                <h3>
                    <% analytics.weaknesses.biology.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.favorites.biology.length > 0) { %>
                <h3 class="mt-3">Favorite Units:</h3>
                <h3>
                    <% analytics.favorites.biology.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

        </div>

        <div class="col-12 col-lg-5">

            <div class="canvas-container-center text-center">
                <canvas id="ratingTrackerChart-Biology" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="ratingTrackerArray-Biology" value="<%= user.stats.ratingTracker.biology.join('@') %>">

        </div>

    </div>
    <a href="/train/biology/proficiency" class="btn btn-primary w-100 btn-lg mt-4">Change Biology Proficiency</a>
</div>

<div class="container jumbotron mb-5">

    <div class="row">

        <div class="col-12 col-lg-7">

            <h3 class="display-4">ESS: <font color="green"><%= user.rating.ess != -1 ? user.rating.ess : "Unrated" %></font></h3>

            <h2 class="mt-3" id="ess-global-rank">Global Rank: XXX</h2>

            <h5 class="mt-3">Collected ESS Tags:</h5>
            <% var counter = 0; %>
            <% user.stats.collectedTags.forEach((tag) => { %>
                <% counter++; %>
                <% if(Object.keys(totalTags["ESS"]["Units"]).includes(tag)) { %>
                    <button class="btn btn-primary btn-sm my-1" disabled><%= tag %></button>
                <% } else if(Object.keys(totalTags["ESS"]["Concepts"]).includes(tag)) { %>
                    <button class="btn btn-info btn-sm my-1" disabled><%= tag %></button>
                <% } else { %>
                    <% counter--; %>
                <% } %>
            <% }); %>

            <% if(counter == 0) { %>
                <p>0 out of <%= Object.keys(totalTags["ESS"]["Units"]).length + Object.keys(totalTags["ESS"]["Concepts"]).length %> possible tags</p>
            <% } else { %>
                <p><%= counter %>/<%= Object.keys(totalTags["ESS"]["Units"]).length + Object.keys(totalTags["ESS"]["Concepts"]).length %> tags in this subject have been collected</p>
            <% } %>

            <% if(analytics.strengths.ess.length > 0) { %>
                <h3 class="mt-3">Areas of Mastery:</h3>
                <h3>
                    <% analytics.strengths.ess.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.studying.ess.length > 0) { %>
                <h3 class="mt-3">Currently Studying:</h3>
                <h3>
                    <% analytics.studying.ess.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.weaknesses.ess.length > 0) { %>
                <h3 class="mt-3">Recommended Training:</h3>
                <h3>
                    <% analytics.weaknesses.ess.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.favorites.ess.length > 0) { %>
                <h3 class="mt-3">Favorite Units:</h3>
                <h3>
                    <% analytics.favorites.ess.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

        </div>

        <div class="col-12 col-lg-5">

            <div class="canvas-container-center text-center">
                <canvas id="ratingTrackerChart-ESS" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="ratingTrackerArray-ESS" value="<%= user.stats.ratingTracker.ess.join('@') %>">

        </div>

    </div>
    <a href="/train/ess/proficiency" class="btn btn-primary w-100 btn-lg mt-4">Change ESS Proficiency</a>
</div>

<div class="container jumbotron mb-5">

    <div class="row">

        <div class="col-12 col-lg-7">

            <h3 class="display-4">USABO: <font color="green"><%= user.rating.usabo != -1 ? user.rating.usabo : "Unrated" %></font></h3>

            <h2 class="mt-3" id="usabo-global-rank">Global Rank: XXX</h2>

            <% if(analytics.strengths.usabo.length > 0) { %>
                <h3 class="mt-3">Areas of Mastery:</h3>
                <h3>
                    <% analytics.strengths.usabo.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.studying.usabo.length > 0) { %>
                <h3 class="mt-3">Currently Studying:</h3>
                <h3>
                    <% analytics.studying.usabo.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.weaknesses.usabo.length > 0) { %>
                <h3 class="mt-3">Recommended Training:</h3>
                <h3>
                    <% analytics.weaknesses.usabo.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

            <% if(analytics.favorites.usabo.length > 0) { %>
                <h3 class="mt-3">Favorite Units:</h3>
                <h3>
                    <% analytics.favorites.usabo.forEach((unit) => { %>
                        <span class="badge rounded-pill bg-primary mt-1"><%= unit.split(' ')[2] %></span> 
                    <% }); %>
                </h3>
            <% } %>

        </div>

        <div class="col-12 col-lg-5">

            <div class="canvas-container-center text-center">
                <canvas id="ratingTrackerChart-USABO" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="ratingTrackerArray-USABO" value="<%= user.stats.ratingTracker.usabo.join('@') %>">

        </div>

    </div>
    <a href="/train/USABO/proficiency" class="btn btn-primary w-100 btn-lg mt-4">Change USABO Proficiency</a>
</div>

<%# Correct/wrong chart %>
<div class="container jumbotron my-5">

    <div class="row">

        <div class="col-12 col-lg-4">

            <h1 class="text-center">Performance</h1>

            <div class="canvas-container-center text-center">
                <canvas id="correctWrongChart" width="400" height="400" class="my-4"></canvas>
            </div>
            <input type="hidden" id="correctcount" value="<%= user.stats.correct %>">
            <input type="hidden" id="wrongcount" value="<%= user.stats.wrong %>">
        </div>

        <div class="col-12 col-lg-8">

            <h1 class="text-center">Site Experience</h1>

            <h3 class="my-3 text-center" id="experience-global-rank">Global Rank: XXX</h3>

            <div class="progress" style="height: 20px; background-color:rgb(220, 220, 220)" id="experience-bar">
                <div id="experience-indicator" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: <%= Math.round(100*userLevel.remainder/userLevel.totalToNext) %>%"></div>
            </div>
            <p id="experience-stats" class="text-center"><strong>Level <%= userLevel.level %></strong> (<%= userLevel.remainder %>/<%= userLevel.totalToNext %> XP to Level <%= userLevel.level+1 %>)</p>

            <hr class="my-4">

            <h1 class="text-center">Problem Rush</h1>

            <h3 class="my-3 text-center" id="rush-global-rank">Global Rank: XXX</h3>

            <div class="row">
                <div class="col-6">
                    <h3 class="text-center">Attempts: <font color="green"><%= user.stats.rush.attempts ? user.stats.rush.attempts : 0 %></font></h3>
                </div>
                <div class="col-6">
                    <h3 class="text-center">High Score: <font color="green"><%= user.stats.rush.highscore ? user.stats.rush.highscore : 0 %></font></h3>
                </div>
            </div>

        </div>

    </div>

</div>

<%- include("../partials/footer") -%>
