window.addEventListener('load', (e) => {
    const overlayEl = document.getElementById('booperOverlay');
    const overlayName = document.getElementById('booperName');
    const overlayTotal = document.getElementById('booperTotal');
    const overlay24h = document.getElementById('booper24h');
    const targets = document.getElementsByClassName('booperTarget');
    let currentTimeout = null;

    for (let i = 0; i < targets.length; i++) {
        const target = targets[i];
        const locators = JSON.parse(target.getAttribute('data-booper'));
        console.debug(locators);
        target.addEventListener('click', (e) => {
            let x = e.offsetX / e.originalTarget.clientWidth;
            let y = e.offsetY / e.originalTarget.clientHeight;
            for (const [name, box] of Object.entries(locators)) {
                const [x1, y1, x2, y2] = box;
                if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
                    console.log(`[booper.js] Booped ${name}!`);
                    console.debug(e);
                    fetch(`/api/boop/${name}`, {method: 'POST'}).then((r) => {
                        if (r.ok) {
                            r.json().then((json) => {
                                clearTimeout(currentTimeout);
                                overlayName.innerText = name[0].toUpperCase()+name.slice(1);
                                overlayTotal.innerText = json['total'];
                                overlay24h.innerText = json['24h'];
                                overlayEl.style.left = `${e.pageX}px`;
                                overlayEl.style.top = `${e.pageY}px`;
                                overlayEl.style.opacity = 1;
                                currentTimeout = setTimeout(() => {
                                    overlayEl.style.opacity = 0;
                                }, 2000);
                                console.debug(json);
                            });
                        } else {
                            console.error(`[booper.js] Error whilst booping:`);
                            console.error(r);
                        }
                    });
                }
            }
        });
    }

    console.log(`[booper.js] Initialised ${targets.length} boop target(s)!`);
});