import { render } from '../../src/index.js';
const { BehaviorSubject, Subject, interval } = rxjs;
const { map, scan, startWith } = rxjs.operators

const clockComponent = ({color}) => {

	const colors = [
		'red',
		'green',
		'blue',
		'orange',
		'black',
		'gray',
	]

	const everySecond = interval(1000).pipe(
		startWith('now')
	)
	const time = everySecond.pipe(
		map(() => new Date())
	)

	const pad = n => String(n).padStart(2, '0')
	const hours = time.pipe(map(now => pad(now.getHours())))
	const mins  = time.pipe(map(now => pad(now.getMinutes())))
	const secs = time.pipe(map(now =>  pad(now.getSeconds())))

	const colorSecs = secs.pipe(
		map(x=>({
			color: colors[x %colors.length],
		}))
	)

	return render`
		<div class="clock" style="white-space: nowrap;">
			<span class="hours">${hours}</span>:
			<span class="mins">${mins}</span>:
			<span class="secs" style="${colorSecs}">${secs}</span>
		</div>
	`;
}

document.body.innerHTML = render`
	<div>${clockComponent({color: 'red'})}</div>
`;

