const twitchChannel1 = 'reclaimfutures';
const twitchChannel2 = 'reclaimfutures2';
let streamChannel = 1;


export default () => {
  if (document.getElementById('page-watch')) {
    let chatVisible = true;
    const toggleChatButton = document.querySelector('#chat-toggle');
    const rightPanel = document.querySelector('.right-panel');
    const program = document.getElementById('program');
    const now = new Date();
    const today = `${(`0${now.getDate()}`).slice(-2)}.${
      (`0${now.getMonth() + 1}`).slice(-2)}.${
      now.getFullYear()}`;

    const handleButtonClick = () => {
      if (chatVisible) {
        rightPanel.classList.add('chat-hidden');
        chatVisible = false;
      } else {
        rightPanel.classList.remove('chat-hidden');
        chatVisible = true;
      }
    };

    if (toggleChatButton) {
      toggleChatButton.addEventListener('click', handleButtonClick, false);
    }

    if (program) {
      const dateToday = new Date();
      const monthIsSeptember = dateToday.getMonth() + 1 === 9;

      const days = {
        18: program.querySelector('.day-18-09'),
        19: program.querySelector('.day-19-09'),
        20: program.querySelector('.day-20-09'),
      };

      if (monthIsSeptember && days[dateToday.getDate()]) {
        Object.keys(days).forEach(day => {
          if (`${day}` !== `${dateToday.getDate()}`) {
            days[`${day}`].classList.add('hide');
          }
        });
      }
    }

    if (today === '18.09.2020') {
      const watchPanel = document.querySelector('.watch-panel');
      
      const switchStreams = (titleButton, toggleButton) => {
        const twitchEmbed = document.querySelector('#twitch-embed iframe');
        twitchEmbed.setAttribute('src', `https://player.twitch.tv?channel=${streamChannel === 2 ? twitchChannel1 : twitchChannel2}&migration=true&parent=reclaimfutures.org&referrer=https%3A%2F%2Freclaimfutures.org%2Frf2020%2Fwatch%2F`);
        streamChannel = streamChannel === 1 ? 2 : 1;
        
        titleButton.innerText = `Stream ${streamChannel === 1 ? 'A' : 'B'}`;
        toggleButton.innerText = `-> watch stream ${streamChannel === 1 ? 'B' : 'A'}`;

        titleButton.classList.toggle('stream-a');
        titleButton.classList.toggle('stream-b');
      };

      const streamTitle = document.createElement('span');
      const streamToggle = document.createElement('button');
      streamTitle.innerText = `Stream A`;
      streamToggle.innerText = `-> watch stream B`;
      streamTitle.classList.add('stream-title', 'stream-a');
      streamToggle.classList.add('stream-toggle',);

      streamToggle.addEventListener('click', () => switchStreams(streamTitle, streamToggle));


      watchPanel.prepend(streamToggle);
      watchPanel.prepend(streamTitle);
    }
  }

};