const countElement = document.querySelector('#mrbr_count');
const usersElement = document.querySelector('#mrbr_users');
const statusElement = document.querySelector('#mrbr_status');

const params = new URLSearchParams(window.location.search);
const channel = params.get('channel') || 'sarimoko';
const client = new tmi.Client({
  connection: {
    secure: true,
    reconnect: true,
  },
  channels: [channel],
});

client.connect().then(() => {
  statusElement.textContent = `Connection to ${channel} successful, listening for votes...`;
});

let listeningForCount = false;
let users = {};

client.on('message', (wat, tags, message, self) => {
  if (self) return;
  const { username } = tags;
  if (username.toLowerCase() === channel.toLowerCase()) {
    if (message === '!startmcbr') {
      listeningForCount = true;
    }
	  else if (message === '!stopmcbr') {
      listeningForCount = false;
      // say count out loud.
      const sayCount = new SpeechSynthesisUtterance(Object.keys(users).length);
      window.speechSynthesis.speak(sayCount);
    }
	  else if (message === '!clearmcbr') {
      countElement.textContent = 'Waiting for votes...';
      usersElement.textContent = '';
      users = {};
    }
  } else if (listeningForCount && message === '!mcbr') {
    users[tags.username] = true;
    // display current count page.
    countElement.textContent = Object.keys(users).length;
    usersElement.textContent = Object.keys(users).join(', ');
  }
});