const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

const red = document.querySelector('.red')
const yellow = document.querySelector('.yellow')
const green = document.querySelector('.green')
let col = red

// async function trafficLight(){
//     while (true){
//         changeLight(green)
//         await delay(3000)
//         changeLight(yellow)
//         await delay(2000)
//         changeLight(red)
//         await delay(3000)
//     }
// }
// trafficLight().then()

function changeLight(color) {
    if(col !== color) {
        col.style.opacity = .2
        color.style.opacity = 1
        col = color
    } else {
        color.style.opacity = 1
    }
}

let btn = document.querySelector('.btn')

function domEventPromise(button, eventName) {
    return new Promise(res => {
        button.addEventListener(eventName, (e) => res(e))

        button.removeEventListener(eventName, (e) => res(e))
    });
}
domEventPromise(btn, 'click')
    .then(e => console.log('event click happens', e))

let stopLightIsActive = true
async function pedestrianTrafficLight() {
    while(stopLightIsActive){
            changeLight(red)
            await delay(100)
    }
}
pedestrianTrafficLight().then()
btn.addEventListener('click', async () => {
    stopLightIsActive = !stopLightIsActive
        await delay(3000)
        changeLight(yellow)
        await delay(1000)
        changeLight(green)
        await delay(4000)
        changeLight(yellow)
        await delay(1000)
        changeLight(red)
});