{% extends "base.jinja2" %}

{% block title %}Halloween Countdown{% endblock title %}

{% block nav %}
{% if logged_in %}
<li class="nav-item">
    <a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/profile">Profile</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
    <a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/register">Register</a>
</li>
<li class="nav-item">
    <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="/logout">Logout</a>
</li>
{% endif %}
{% endblock %}

{% block body %}

<div class="position-absolute top-50 start-50 translate-middle text-center">
    <h1 id="halloween_countdown">Time to next Halloween: Loading...</h1>
    <div class="mt-3"></div>
    <h3 id="visualization_info">Carved Pumpkin Countdown Visualization (last ? days to Halloween):</h3>
    <canvas id="pumpkin_canvas" width="600" height="600"></canvas>
    <button type="button" id="lightBtn" class="btn btn-warning">Light!</button>
</div>

<script>
const halloween_countdown = document.getElementById("halloween_countdown");
const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, null, 15, false);
let pattern = [];
let last_days = -1;
const CELL_SIZE = canvas.width / 15;

function update() {
    const current_time = new Date();
    let year = current_time.getFullYear();

    const halloween_time = new Date(year, 9, 31);
    const after_halloween = new Date(year, 15, 1);

    if (current_time > halloween_time) {
        if (current_time < after_halloween) {
            halloween_countdown.textContent = "It's currently Loginween! :)";
            return;
        }
        else {
            halloween.setFullYear(year + 1);
        }
    }

    const diff = halloween_time - current_time;

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);
    
    if (days <= pattern.length && days != last_days) {
        last_days = days;
        clearCanvas(ctx, canvas, img, 15, []);
        unlight_pumpkin(ctx, CELL_SIZE, pattern.slice(0, pattern.length - days));
    }

    halloween_countdown.textContent = `Time to next Halloween: ${days} day(s) ${hours} hour(s) ${minutes} minute(s) ${seconds} second(s)`
}

img.addEventListener('load', function() {
    pattern = get_colorable(ctx, canvas, 15);
    document.getElementById("visualization_info").textContent = `Carved Pumpkin Countdown Visualization (last ${pattern.length} days to Halloween):`
    imageLoaded = true;
    update();
    setInterval(update, 1500);
});


let lit = false;
document.getElementById("lightBtn").addEventListener('click', function(event) {
    if (lit) {
        lit = false;
        unlight_pumpkin(ctx, CELL_SIZE, pattern.slice(0, pattern.length - last_days));
    } 
    else {
        lit = true;
        light_pumpkin(ctx, CELL_SIZE, pattern.slice(0, pattern.length - last_days));
    }
});
</script>

{% endblock body %}