<%# Page for displaying profile %>
<%# ARGUMENTS: user - user object for which stats are being displayed, totalTags - list of all tags on site,
    allAchievements - the possible achievements, age - current user age %>

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

<script>

    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";
                    ctx.font = fontSize + "em sans-serif";

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

                    ctx.fillStyle = "#208d0f";
                    text = "Correct: <%= Math.round(100*(user.stats.correct)/(user.stats.correct+user.stats.wrong)) %>%";
                    textX = Math.round((width - ctx.measureText(text).width) / 2);
                    textY -= 35;
                    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()],
                    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 chart

        let ratingData = {
            "Physics": [],
            "Chemistry": [],
            "Biology": [],
            "Labels": []
        }
        
        // DO NOT DELETE - ratingData is not defined if this is deleted
        console.log(ratingData);

        ["Physics", "Chemistry", "Biology"].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);
        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
                }]
            },
            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"]))-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"]))+50)/50)*50,
                            stepSize: 50
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            display: false
                        }
                    }]
                },
                responsive: true
            }
        });

    }

</script>

<h3 class="mt-5 mb-3 container display-3"><strong><%= user.ign %></strong></h3>

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

<div class="mt-3 container">

	<div class="row">
	
		<div class="col-12 col-md-3 jumbotron">
			<div class="">
                
				<h4><%= user.profile.name ? (user.profile.name.length <= 18 ? user.profile.name : user.profile.name.substring(0, 15)+"...") : (user.ign.length <= 18 ? user.ign : user.ign.substring(0, 15)+"...") %></h4>
                
                <hr class="my-3">

                <p><%= user.profile.yob ? "Age: " + age  : ""%></p>

                <hr class="my-2">

                <p><%= user.profile.location ? "Location: " + user.profile.location : "Lives within 8000 miles of Antartica" %></p>

                <hr class="my-2">

                <p><%= user.profile.bio ? user.profile.bio : "This is a very mysterious person who likes pink butterflies and blue cows. Mu!" %></p>

                <hr class="my-2">

                <h4 class="mt-2">Achievements:</h4>
                <% var achievements = user.achievements; %>
                <% var count = 0; %>
                <% for(const achievement in allAchievements) { %>
                    <% if(achievements[achievement]) { %>
                        <p><%= allAchievements[achievement].name %></p>
                        <% count++; %>
                    <% } %>
                <% } %>
                <% if(count == 0) { %>
                    <p>None (yet)</p>
                <% } %>
			</div>
		</div>
		
		<div class="col-12 col-md-9">
			<div class="jumbotron">
			
				<div class="row">
					<div class="col-12 col-lg-7">
                        <div class="canvas-container-center text-center">
                            <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('@') %>">
					</div>
					<div class="col-12 col-lg-5">
                        <div class="canvas-container-center text-center">
                            <canvas id="correctWrongChart" width="400" height="400" class="my-4"></canvas>
                        </div>
                        <p class="text-center"><a target="_blank" href="/stats/<%= user.ign %>">See full stats</a></p>
                        <input type="hidden" id="correctcount" value="<%= user.stats.correct %>">
                        <input type="hidden" id="wrongcount" value="<%= user.stats.wrong %>">
					</div>
                </div>
                
                <hr class="my-4">

                <h2 class="text-center">Problem Rush High Score: <font color="green"><%= user.stats.rush.highscore ? user.stats.rush.highscore : 0 %></font></h2>

                <hr class="my-4">

                <div>
                    <h3 class="mb-3 text-center">Collected Tags</h3>
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <h5 class="mb-3 text-center">Physics</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 class="text-center">0 out of <%= Object.keys(totalTags["Physics"]["Units"]).length + Object.keys(totalTags["Physics"]["Concepts"]).length %> possible tags</p>
                            <% } else { %>
                                <p class="mt-3"><%= counter %>/<%= Object.keys(totalTags["Physics"]["Units"]).length + Object.keys(totalTags["Physics"]["Concepts"]).length %> tags in this subject have been collected</p>
                            <% } %>
                        </div>
                        <div class="col-12 col-md-4">
                            <h5 class="mb-3 text-center">Chemistry</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 class="text-center">0 out of <%= Object.keys(totalTags["Chemistry"]["Units"]).length + Object.keys(totalTags["Chemistry"]["Concepts"]).length %> possible tags</p>
                            <% } else { %>
                                <p class="mt-3"><%= counter %>/<%= Object.keys(totalTags["Chemistry"]["Units"]).length + Object.keys(totalTags["Chemistry"]["Concepts"]).length %> tags in this subject have been collected</p>
                            <% } %>                            
                        </div>
                        <div class="col-12 col-md-4">
                            <h5 class="mb-3 text-center">Biology</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 class="text-center">0 out of <%= Object.keys(totalTags["Biology"]["Units"]).length + Object.keys(totalTags["Biology"]["Concepts"]).length %> possible tags</p>
                            <% } else { %>
                                <p class="mt-3"><%= counter %>/<%= Object.keys(totalTags["Biology"]["Units"]).length + Object.keys(totalTags["Biology"]["Concepts"]).length %> tags in this subject have been collected</p>
                            <% } %>
                        </div>
                    </div>
                </div>
				
			</div>
		</div>
        
	</div>
	
</div>

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