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

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

<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": [],
            "ESS": [],
            "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");
        });

        $(".classic-subject-button").hover(function () {
            $("#classic-subjects-text").text("Classic Subject: " + $(this).attr('id'));
        }, () => {
            $("#classic-subjects-text").text("Classic Subjects");
        });

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

        ["Physics", "Chemistry", "Biology", "ESS", "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["ESS"].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: "Physics",
                    data: ratingData["Physics"],
                    backgroundColor: "rgba(100, 200, 230, 1)",
                    borderColor: "rgba(100, 200, 230, 1)",
                    fill: false,
                    borderWidth: 5
                }, {
                    label: "Chemistry",
                    data: ratingData["Chemistry"],
                    backgroundColor: "rgba(245, 170, 40, 1)",
                    borderColor: "rgba(245, 170, 40, 1)",
                    fill: false,
                    borderWidth: 5
                }, {
                    label: "Biology",
                    data: ratingData["Biology"],
                    backgroundColor: "rgba(40, 240, 110, 1)",
                    borderColor: "rgba(40, 240, 110, 1)",
                    fill: false,
                    borderWidth: 5
                }, {
                    label: "ESS",
                    data: ratingData["ESS"],
                    backgroundColor: "rgba(184, 150, 191, 1)",
                    borderColor: "rgba(184, 150, 191, 1)",
                    fill: false,
                    borderWidth: 5
                }, {
                    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["Physics"]), Math.min.apply(null, ratingData["Chemistry"]), Math.min.apply(null, ratingData["Biology"]), Math.min.apply(null, ratingData["ESS"]), Math.min.apply(null, ratingData["USABO"]))-50)/50)*50,
                            max: Math.round((Math.max(Math.max.apply(null, ratingData["Physics"]), Math.max.apply(null, ratingData["Chemistry"]), Math.max.apply(null, ratingData["Biology"]), Math.max.apply(null, ratingData["ESS"]), 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, <%= user.ign %></h1>

    <% if (admin) { %>
      <a class="btn btn-primary btn-lg w-100 my-2" href="/admin/adminHomepage">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/addQuestion">Write Question</a>
        <a class="btn btn-primary btn-lg w-100 my-2" href="/contributors/addUSABOQuestion">Write A USABO Question</a>
        <% if (user.reviewer) { %>
            <a class="btn btn-primary btn-lg w-100 my-2" href="/reviewer/reviewQuestions">Review Questions</a>
        <% } %>
        <a class="btn btn-primary btn-lg w-100 my-2" href="/contributors/stats">View My 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">Physics: <span class="badge rounded-pill bg-primary">
              <% if (user.rating.physics > 0) { %>
                <%= Math.max(user.rating.physics, 0) %>
              <% } else { %>
                No rating
              <% } %>
            </span></h1>

            <h1 class="display-5 text-center mt-4">Chemistry: <span class="badge rounded-pill bg-primary">
              <% if (user.rating.chemistry > 0) { %>
                <%= Math.max(user.rating.chemistry, 0) %>
              <% } else { %>
                No rating
              <% } %>
            </span></h1>

            <h1 class="display-5 text-center mt-4">Biology: <span class="badge rounded-pill bg-primary">
              <% if (user.rating.biology > 0) { %>
                <%= Math.max(user.rating.biology, 0) %>
              <% } else { %>
                No rating
              <% } %>
            </span></h1>

            <h1 class="display-5 text-center">ESS: <span class="badge rounded-pill bg-primary">
              <% if (user.rating.ess > 0) { %>
                <%= Math.max(user.rating.ess, 0) %>
              <% } else { %>
                No rating
              <% } %>
            </span></h1>

            <h1 class="display-5 text-center mt-4">USABO: <span class="badge rounded-pill bg-primary">
              <% if (user.rating.usabo > 0) { %>
                <%= Math.max(user.rating.usabo, 0) %>
              <% } else { %>
                No rating
              <% } %>
            </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-ESS" value="<%= user.stats.ratingTracker.ess.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</h1>
            <div class="row">
                <div class="col-4">
                    <a href="/train/chooseSubject" class="training-mode-button" id="Classic"><img id="classic-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Train_Classic.svg" alt="Classic icon"></a>
                </div>
                <div class="col-4">
                    <a href="/train/rush" class="training-mode-button" id="Rush"><img id="rush-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Train_Rush.svg" alt="Rush icon" width="100%"></a>
                </div>
                <div class="col-4">
                    <a href="/train/daily" class="training-mode-button" id="Daily"><img id="daily-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Train_Daily.svg" alt="Daily icon"></a>
                </div>
            </div>

            <h1 class="text-center mt-5" id="classic-subjects-text">Classic Subjects</h1>
            <div class="row">
                <div class="col-4">
                    <a href="/train/Physics/chooseUnits" class="classic-subject-button" id="Physics"><img id="physics-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Physics_Main.svg" alt="Physics icon"></a>
                </div>
                <div class="col-4">
                    <a href="/train/Chemistry/chooseUnits" class="classic-subject-button" id="Chemistry"><img id="chem-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Chem_Main.svg" alt="Chem icon"></a>
                </div>
                <div class="col-4">
                    <a href="/train/Biology/chooseUnits" class="classic-subject-button" id="Biology"><img id="bio-icon" class="thumbnail mu-rounded" src="https://cdn.mutorials.org/images/icons/Bio_Main.svg" alt="Bio icon"></a>
                </div>
            </div>
            
            <h1 class="text-center mt-5" id="classic-subjects-text"></h1>
            <div class="row">
                <div class="col-4"></div>
                <div class="col-4">
                    <a href="/train/ESS/chooseUnits" class="classic-subject-button" id="ESS"><img id="ESS-icon" class="thumbnail mu-rounded img-fluid" src="https://mutorials.blob.core.windows.net/images/icons/ess icon.jpeg" alt="ESS icon"></a>
                </div>
                <div class="col-4"></div>     
            </div>

            <h1 class="text-center mt-5" id="classic-subjects-text">Train for USABO!</h1>
            <div class="row">
                <div class="col-4"></div>
                <div class="col-4">
                    <a href="/usaboHomepage" class="USABO-button" id="USABO"><img id="USABO-icon" class="thumbnail mu-rounded img-fluid" src="https://cdn.mutorials.org/images/icons/USABO_Main.png" alt="USABO icon"></a>
                </div>
                <div class="col-4"></div>
            </div>

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

    </div>
</div>

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

<!-- Search is a private feature -->
<div class="container mt-4 d-block px-4 py-2 bg-alternate search-result">
    <div class="row">
        <%- include("../partials/components/search", { query: { text: '', units: [], tags: [] } }) -%>
    </div>
</div>

<div class="container mb-4">
    <div class="row">
        <div class="col-lg-6">
            <%- include("../partials/components/dailySnippet") -%>
        </div>
        <div class="col-lg-6">
            <%- include("../partials/components/announcementSnippet") -%>
        </div>
    </div>
</div>
<footer class="text-center"><button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#contact-modal">Contact us</button></footer>

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