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();
            const tag = link.href.split('#').slice(-1)[0];
            document.getElementById(tag).scrollIntoView();
        });
    });
}

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");
    if (navigator.clipboard === undefined) {
        share_btn.onclick = event => {
            console.error("clipboard is not supported by this browser!");
        };
        return;
    }
    share_btn.onclick = event => {
        event.preventDefault();
        navigator.clipboard.writeText(window.location.href);
        share_btn.classList.remove('active');
        void share_btn.offsetWidth;
        share_btn.classList.add('active');
    }
}

bind_share_btn();
bind_go_back_btn();
apply_funny_bob_to_upcoming_tags();
update_extras_buttons();