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

// async function trafficLight(parent, redTime=4000, yellowTime=2000, greenTime=2000){
//     let container = document.createElement('div')
//     container.style.backgroundColor = 'grey'
//     container.style.width = 'fit-content'
//     container.style.padding = '5px'

//     let red = document.createElement('div')
//     let yellow = document.createElement('div')
//     let green = document.createElement('div')
//     let elems = [red, yellow, green]
    
//     for(let item of elems) {
//         item.style.backgroundColor = 'black'
//         item.style.width = '100px'
//         item.style.height = '100px'
//         item.style.borderRadius = '100%'
//         item.style.margin = '10px'
//         container.append(item)
//     }

//     parent.append(container)
//     while (true){
//         red.style.backgroundColor = 'red'
//         red.style.boxShadow = '0px 2px 10px red'

//         await delay(redTime)
//         red.style.boxShadow = 'none'
//         red.style.backgroundColor = 'black'
//         yellow.style.backgroundColor = 'yellow'
//         yellow.style.boxShadow = '0px 2px 10px yellow'

//         await delay(yellowTime)
//         yellow.style.boxShadow = 'none'
//         yellow.style.backgroundColor = 'black'
//         green.style.backgroundColor = 'lightgreen'
//         green.style.boxShadow = '0px 2px 10px lightgreen'

//         await delay(greenTime)
//         green.style.boxShadow = 'none'
//         green.style.backgroundColor = 'black'
//     }
// }

let div = document.createElement('div')
document.body.append(div)
//trafficLight(div, 5000, 3000, 2000)

//domEventPromise
let btn = document.createElement('button')
btn.innerText = 'click'
document.body.append(btn)

function domEventPromise(elem, eventName) {
  let prom = new Promise((resolve, reject) => {
    function doAndRemove(event) {
        elem.removeEventListener(eventName, doAndRemove)
        //console.log('clicked')
        resolve(event)
    }
    elem.addEventListener(eventName, doAndRemove)
  })
  return prom
}
domEventPromise(btn, 'click').then( (event) => console.log('event click happens', event))

async function pedestrianTrafficLight  (parent, redTime=4000, yellowTime=2000, greenTime=2000) {
  let container = document.createElement('div')
  container.style.backgroundColor = 'grey'
  container.style.width = 'fit-content'
  container.style.padding = '5px'

  let btn = document.createElement('button')
  btn.innerText = 'pedestrian button'

  let red = document.createElement('div')
  let yellow = document.createElement('div')
  let green = document.createElement('div')
  let elems = [red, yellow, green]
  
  for(let item of elems) {
      item.style.backgroundColor = 'black'
      item.style.width = '100px'
      item.style.height = '100px'
      item.style.borderRadius = '100%'
      item.style.margin = '10px'
      container.append(item)
  }

  container.append(btn)
  parent.append(container)

  while (true){
      let buttonPresed = domEventPromise(btn, 'click')
      Promise.race([delay, buttonPresed]).then(e => console.log(e))
      red.style.backgroundColor = 'red'
      red.style.boxShadow = '0px 2px 10px red'

      await delay(redTime)
      Promise.race([delay, buttonPresed]).then(e => console.log(e))
      red.style.boxShadow = 'none'
      red.style.backgroundColor = 'black'
      yellow.style.backgroundColor = 'yellow'
      yellow.style.boxShadow = '0px 2px 10px yellow'

      Promise.race([delay, buttonPresed]).then(e => console.log(e))
      await delay(yellowTime)
      yellow.style.boxShadow = 'none'
      yellow.style.backgroundColor = 'black'
      green.style.backgroundColor = 'lightgreen'
      green.style.boxShadow = '0px 2px 10px lightgreen'

      Promise.race([delay, buttonPresed]).then(e => console.log(e))
      await delay(greenTime)
      green.style.boxShadow = 'none'
      green.style.backgroundColor = 'black'
  }



}

pedestrianTrafficLight(div, 3000, 3000, 3000)