const redLight = document.querySelector(".red");
const yellowLight = document.querySelector("#yellow");
const greenLight = document.querySelector("#green");
const INTERVAL = 1000;

const normalButton = document.querySelector("#normal");
normalButton.addEventListener("click", activateNormalMode);

const outageButton = document.querySelector("#outage");
outageButton.addEventListener("click", activateOutageMode);

const onButton = document.querySelector("#on");
onButton.addEventListener("click", () => {
    resetButtons();
    highlightButton(onButton);
    lights.forEach((light) => {
        light.classList.remove("outage");
        light.style.opacity = 1;
    });
    normalButton.addEventListener("click", activateNormalMode);
});

const offButton = document.querySelector("#off");
offButton.addEventListener("click", () => {
    resetButtons();
    highlightButton(offButton);
    //offButton.style.visibility = "hidden";
    lights.forEach((light) => {
        light.classList.remove("outage");
        lights.forEach((light) => {
            light.style.opacity = 0.25;
        });
    });
    normalButton.addEventListener("click", activateNormalMode);
});
// TODO:  Create function to turn the lights off, so I can possibly use it elsewhere in the code.

const buttons = Array.from(document.querySelectorAll("button"));

const lights = [greenLight, yellowLight, redLight];

function activateNormalMode() {
    console.log("activated normal mode");
    resetButtons();
    highlightButton(normalButton);
    lights.forEach((light) => {
        light.classList.remove("outage");
    });
    const tick = setInterval(changeLight, INTERVAL);
    // Temporarily remove listener to avoid weird timing
    normalButton.removeEventListener("click", activateNormalMode);
    [onButton, offButton, outageButton].forEach((button) => {
        button.addEventListener("click", () => {
            clearInterval(tick);
        });
    });
    normalButton.addEventListener("click", () => {
        // clearInterval(tick);
        lights.forEach((light) => (light.style.opacity = 0.25));
        // normalButton.addEventListener("click", activateNormalMode);
    });
}

let i = 0;
function changeLight() {
    lights.forEach((light) => (light.style.opacity = 0.25));
    lights[i % lights.length].style.opacity = 1;
    i++;
}

function activateOutageMode() {
    console.log("activated outage mode");
    resetButtons();
    highlightButton(outageButton);
    lights.forEach((light) => {
        light.style.opacity = 0.25;
    });
    red.classList.add("outage");
    normalButton.addEventListener("click", activateNormalMode);
}

function resetButtons() {
    buttons.forEach((button) => {
        button.style = "initial";
    });
}

// Simulates pushing the button in
function highlightButton(button) {
    button.style.scale = ".975";
    button.style.boxShadow =
        "1px 1px 2px var(--med-gray) inset, 1px 1px 2px var(--light-gray)";
}

const modal = document.querySelector("#modal");
document.addEventListener("click", (e) => {
    e.preventDefault();
    console.log(e.target.value);
    modal.style.visibility = "hidden";
});

activateNormalMode();

setTimeout(() => {
    modal.style.visibility = "hidden";
}, 3000);