<%# Root page upon signin %>
<%# ARGUMENTS: user - the user logged in right now %>

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

<script>

    $(document).ready(function() {

        $(".thumbnail").fadeTo(0, 0.8);
        $(".thumbnail").on({
            mouseenter: function() {
                $(this).fadeTo(200, 1);
            },
            mouseleave: function() {
                $(this).fadeTo(200, 0.8);
            }
        });

        // render rating tracker chart

        let ratingData = {
            "Physics": [],
            "Chemistry": [],
            "Biology": [],
            "USABO": [],
            "Labels": []
        }

        // configure subject descriptions
        $(".training-mode-button").hover(function () {
            $("#training-modes-text").text("Training Mode: " + $(this).attr('id'));
        }, () => {
            $("#training-modes-text").text("Training Modes");
        });


        // DO NOT DELETE - ratingData is not defined if this is deleted
        console.log(ratingData);

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

            let tracker = $("#ratingTrackerArray-" + subject).val().split('@');
            if(tracker.length < 2) {
                tracker.unshift(tracker[0]);
            }
            ratingData[subject] = tracker;
        });

        const labelLength = Math.max(ratingData["Physics"].length, ratingData["Chemistry"].length, ratingData["Biology"].length, ratingData["USABO"].length);
        var labels = ratingData["Labels"];
        for(var i = labelLength; i > 0; i--) {
            labels.push(i + " Ago");
        }
        labels.push("");
        ratingData["Labels"] = labels;

        var ctxTracker = document.getElementById("ratingTrackerChart");

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

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

    });

    window.onload = () => {

        // init AOS
        AOS.init({
            disable: function () {
                var maxWidth = 800;
                return window.innerWidth < maxWidth;
            },
            mirror: true
        });
    }

</script>


<div class="container mt-5 mb-1">
    <div class="mb-2">
        <%- include("../partials/flashes") -%>
    </div>
    <h1 class="text-center display-3">Welcome to USABO Practice!</h1>


    <div class="container mt-5 mb-1">
        <a class="btn btn-primary btn-lg w-100 my-2" href="/homepage">Return to Homepage</a>
    </div>

    <% if (admin) { %>
      <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/usaboAdminHomepage">USABO Admin Dashboard</a>
    <% } %>
</div>


<div class="container my-3">
    <%- include("../partials/components/experienceBar") -%>
</div>

<%- include("../partials/components/iconBar") -%>

<% if(user.contributor) { %>
    <div class="jumbotron container mt-2">
        <h3 class="mb-4 text-center">CONTRIBUTORS: <font color="blue"><%= user.contributor %></font></h3>
        <a class="btn btn-primary btn-lg w-100 my-2" href="/contributors/addUSABOQuestion">Add a USABO Question</a>
        <% if (user.reviewer) { %>
            <a class="btn btn-primary btn-lg w-100 my-2" href="/reviewer/reviewUSABOQuestions">Review USABO Questions</a>
        <% } %>
        <a class="btn btn-primary btn-lg w-100 my-2" href="/contributors/stats">View My Overall Contribution Stats</a>
    </div>
<% } %>

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

    <div class="row">

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

            <h1 class="display-5 text-center mt-4">USABO: <span class="badge rounded-pill bg-primary"><%= Math.max(user.rating.usabo, 0) %></span></h1>

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

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

            <h1 class="text-center" id="training-modes-text">Training Modes (Coming Soon)</h1>
            

            <a class="btn btn-primary w-100 btn-lg mt-5" href="/train/usabo/chooseCategories">Train Now!</a>
        </div>

    </div>
</div>

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