const usersElement = document.querySelector('#count');
const usersElement = document.querySelector('#users');

const client = new tmi.Client({
	options: { debug: true },
	//identity: {
	//	username: 'sariboto',
	//	password: 'oauth:480i2mbv7zvfjz1t3wplj5di530p9r'
	//},
	connection: {
        secure: true,
        reconnect: true,
    }
	channels: [ 'sarimoko' ]
});

client.connect();

let listeningForCount = false;
let users = {};

client.on('message', (channel, tags, message, self) => {
	if(self) return;
    const { username } = tags;
    if (username === 'sarimoko' || username === 'sariboto') {
        if (message === '!start-count') {
            listeningForCount = true;
        } else if (message === '!end-count'){
        listeningForCount= false;
        // say count out loud
        const sayCount = new SpeechSynthesisUtterance(Object.keys(users).length)
        window.speechSynthesis.speak(sayCount);
        }else if (message === '!clear-count'){
        listeningForCount= false;
        countElement.textContent = 'Waiting for count...';
        userElement.textContent = '';
        users = {};
        }
    } else if (listeningForCount && message === '+1') {
        users[tags.username] = true;
        // display current count page.
        countElement.textContent = Object.keys(users).length;
        userElement.textContent = Object.keys(users).join(', ');
        //console.log(Object.keys(users).length);
    }
	// "Alca: Hello, World!"
	//console.log(`${tags['display-name']}: ${message}`);
});