import "./main.js";

function apply_funny_bob_to_upcoming_tags() {
        const upcoming_tags = document.querySelectorAll("#type.upcoming");
        for (var i = 0; i < upcoming_tags.length; i++) {
                const tag = upcoming_tags[i];
                const chars = tag.innerText.split("");
                const result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
                tag.innerHTML = result.join("");
        }
}

function update_extras_buttons() {
        const extras_pairs = Array.from(document.querySelectorAll("div#info > div").values()).map(container => {
                return {
                        container,
                        button: document.getElementById("extras").querySelector(`ul li a[href="#${container.id}"]`)
                };
        });
        const info_container = document.getElementById("info")
        info_container.addEventListener("scroll", update_extras_buttons);
        const info_rect = info_container.getBoundingClientRect();
        const info_y = info_rect.y;
        const font_size = parseFloat(getComputedStyle(document.documentElement).fontSize);
        let current = extras_pairs[0];
        extras_pairs.forEach(pair => {
                pair.button.classList.remove("active");
                const scroll_diff = pair.container.getBoundingClientRect().y -
                        info_rect.y -
                        info_rect.height / 2 +
                        4 * font_size;
                if (scroll_diff <= 0) current = pair;
        })
        current.button.classList.add("active");

        document.querySelectorAll("div#extras ul li a[href]").forEach(link => {
                link.addEventListener("click", event => {
                        event.preventDefault();
                        location.replace(link.href);
                });
        });
}

function bind_go_back_btn() {
        const go_back_btn = document.getElementById("go-back")
        go_back_btn.innerText = "<";
        go_back_btn.addEventListener("click", () => {
                window.history.back();
        });
}

function bind_share_btn() {
        const share_btn = document.getElementById("share");
        share_btn.onclick = (e) => {
                navigator.clipboard.writeText(window.location.href);
                share_btn.classList.remove('active');
                void share_btn.offsetWidth;
                share_btn.classList.add('active');
        }
}

function start() {
        bind_share_btn();
        bind_go_back_btn();
        apply_funny_bob_to_upcoming_tags();
        update_extras_buttons();
}

start();