const domEventPromise = (element, eventName) => {
	return new Promise((resolve, reject) => {
		const handler = event => {
			resolve(event);
			element.removeEventListener(eventName, handler);
		}
		element.addEventListener(eventName, handler);
	});
}

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

const toggleLight = (switcher, className) => {
	const element = document.querySelector(className).classList;
	switcher ? element.add('on') : element.remove('on');
}

const addDomElement = (element) => {
	for(let i = 1; i <= 3; i++) {
		const domElement = document.createElement(element);
		domElement.classList.add('traffic-light__element');
		if(i === 1) {
			domElement.classList.add('green');
		} else if (i === 2) {
			domElement.classList.add('yellow');
		} else {
			domElement.classList.add('red');
		}
		trafficLightId.appendChild(domElement);
	}
}

const trafficLight = async (domElement, delayGreen, delayYellow, delayRed) => {
	addDomElement(domElement);
	while (true){
		toggleLight(false,'.red');
		toggleLight(true,'.green');
		await Promise.race([delay(delayGreen), Promise.all([delay(1000), domEventPromise(button, 'click')])]);
		toggleLight(false,'.green');
		toggleLight(true,'.yellow');
		await Promise.race([delay(delayYellow), Promise.all([delay(1000), domEventPromise(button, 'click')])]);
		toggleLight(false,'.yellow');
		toggleLight(true,'.red');
		await Promise.race([delay(delayRed), Promise.all([delay(1000), domEventPromise(button, 'click')])]);
	}
}

trafficLight('div',2000, 4000, 6000);