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

async function trafficLight() {
    let red = document.getElementById('red')
    let yellow = document.getElementById('yellow')
    let green = document.getElementById('green') 
    let redTimer = document.getElementById('redTimer')
    let greenTimer = document.getElementById('greenTimer')

    while (true) {
        await delay(500)
            .then(() => red.style.opacity = 1)

        await delay(10000)
            .then(() => red.style.opacity = 0.3)
            .then(timer(10, redTimer))

        await delay(500)
            .then(() => yellow.style.opacity = 1)

        await delay(1000)
            .then(() => yellow.style.opacity = 0.3)

        await delay(500)
            .then(() => green.style.opacity = 1)

        await delay(10000)
            .then(() => green.style.opacity = 0.3)
            .then(timer(10, greenTimer))

        await delay(500)
            .then(() => yellow.style.opacity = 1)

        await delay(1000)
            .then(() => yellow.style.opacity = 0.3)
    }
}

let btn = document.getElementById('btn')

async function humanTrafficLightGreen() {
    let green = document.getElementById('humanGreen')
    let greenTimer = document.getElementById('humanGreenTimer')

    while (true) {
        await delay(500)
            .then(() => green.style.opacity = 1)

        await delay(10000)
            .then(() => green.style.opacity = 0.3)
            .then(timer(10, greenTimer))

        await delay(13500)
    }
}

async function humanTrafficLightRed() {
    let red = document.getElementById('humanRed')
    let redTimer = document.getElementById('humanRedTimer')

    while (true) {
        await delay(12500)
            .then(() => red.style.opacity = 1)

        await delay(10000)
            .then(() => red.style.opacity = 0.3)
            .then(timer(10, redTimer))

        await delay(1500)
    }
}



async function timer(time, value) {
    for (time; time > 0; time--) {
        value.innerHTML = time
        await delay(1000)
        value.innerHTML = ""
    }
}

trafficLight()

async function humanTrafficLight() {
    while (true) {
        await Promise.race([humanTrafficLightGreen(), 
            humanTrafficLightRed(), domEventPromise(btn, 'click').then(e => {
            console.log('event click happens', e)
            humanTrafficLight()
        })])
    }
}

humanTrafficLight()

function domEventPromise(click, eventName) {
    return new Promise(function (resolve) {
        // debugger
        click.addEventListener(eventName, function clickListener(e) {
            click.removeEventListener(eventName, clickListener);

            resolve(e);
        });
    });
}

async function speedtest(getPromise, count,parallel=1){
    let duration = performance.now();
    let request = parallel;
    let arr = [];
    for (let i = 0; i < count; i++) {
        arr[i] = getPromise();
        parallel -= 1;
        await Promise.all(arr);
    }
    duration = performance.now() - duration;
    
    return {
        duration: duration,
        querySpeed: count / duration,
        queryDuration: duration / count,
        parallelSpeed: (count / duration) * request,
        parallelDuration: duration / (request * count)
    }
}

speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))

speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5).then(result => console.log(result))