/**
 * This file contains the animation logic for the closed screen.
 *
 * In it, we fill the screen evenly with "closed" messages. The locations are
 */
/**
 * Contains the state for this demo.
 *
 * @type {{popups: Array, popup_index: number}}
 */
const state = {
    popups: [],
    popup_index: 0,
};

const MAX_POPUPS = 200;

function startClosedAnimation() {
    window.setInterval(animationTick, 50);
}

function minDist(x, y) {
    let min = 0;
    let element;
    for (element of state.popups) {
        if (element == null) {
            continue;
        }

        const dx = x - element.x;
        const dy = y - element.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        min = Math.min(dist, min);
    }

    return min;
}

function animationTick() {
    const index = state.popup_index;
    if (state.popups.length >= MAX_POPUPS) {
        document.body.removeChild(state.popups[index].element);
        state.popups[index] = null;
    }

    const width = window.innerWidth;
    const height = window.innerHeight;

    // Generate new candidates
    const candidates = [];
    for (let i = 0; i < MAX_POPUPS; ++i) {
        candidates.push({x: Math.random() * width, y: Math.random() * height});
    }

    let best = candidates[0];
    let max = minDist(candidates[0].x, candidates[0].y);
    let candidate;
    for (candidate of candidates) {
        const dist = minDist(candidate.x, candidate.y);
        if (dist > max) {
            best = candidate;
            max = dist;
        }
    }

    let element = document.createElement('div');
    element.innerText = 'Nee';
    element.classList.add('closed_notice');
    element.style.left = best.x + 'px';
    element.style.top = best.y + 'px';
    element.style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';

    document.body.appendChild(element);
    best.element = element;

    state.popups[index] = best;
    state.popup_index = (index + 1) % MAX_POPUPS;
}

export {startClosedAnimation}