const { ipcRenderer } = require('electron');

let sourceList, contentList, typeButtons, shareButton, cancelButton, activeItem, activeTab = 'screen';

const getItemDOM = item => {
  const li = document.createElement('li');
  li.setAttribute('data-id', item.id);
  li.innerHTML = `<div class="content"><div class="img-wrapper"><img src="${item.thumbnail}" /></div><span>${item.name}</span></div>`;
  li.addEventListener('click', onItemClick, false);
  return li;
};

const updateTab = () => {
  const sources = sourceList.filter(it => it.id.indexOf(activeTab) === 0);
  contentList.innerHTML = '';
  sources.forEach(source => contentList.appendChild(getItemDOM(source)));
};

const bindTypeClick = () => {
  typeButtons.forEach(it => it.addEventListener('click', onChangeType, false));
};

const bindActionsClick = () => {
  shareButton.addEventListener('click', onShareClick, false);
  cancelButton.addEventListener('click', onCancelClick, false);
};

const onChangeType = event => {
  event.preventDefault();
  if (!event.target.classList.contains('active')) {
    activeTab = event.target.dataset.type;
    typeButtons.forEach(it => it.classList.remove('active'));
    event.target.classList.add('active');
    updateTab();
  }
};

const onItemClick = event => {
  event.preventDefault();
  if (!event.currentTarget.classList.contains('active')) {
    activeItem = event.currentTarget.dataset.id;
    document.querySelectorAll('.preview li').forEach(it => it.classList.remove('active'));
    event.currentTarget.classList.add('active');
    changeShareState();
  }
};

const onCancelClick = event => {
  event.preventDefault();
  ipcRenderer.send('screenShare:cancelSelection');
};

const onShareClick = event => {
  event.preventDefault();
  if (activeItem) {
    ipcRenderer.send('screenShare:selectScreen', activeItem);
  }
};

const changeShareState = () => {
  if (shareButton.getAttribute('disabled') !== null) {
    shareButton.removeAttribute('disabled');
  }
};

window.addEventListener('load', async () => {
  sourceList = await ipcRenderer.invoke('screenShare:getSources');

  contentList = document.querySelector('.preview');
  typeButtons = document.querySelectorAll('.type li');
  shareButton = document.querySelector('#share');
  cancelButton = document.querySelector('#cancel');

  bindTypeClick();
  bindActionsClick();
  updateTab();
}, false);