const internals = {

  isInCallState: false,

  icons: {
    call: {
      16: 'icons/action-16.png',
      32: 'icons/action-32.png'
    },

    hangUp: {
      16: 'icons/hang_up-16.png',
      32: 'icons/hang_up-32.png'
    }
  },

  onClick() {
    if (internals.isInCall()) {
      return internals.hangUp();
    }

    return internals.joinAudioCall();
  },

  async joinAudioCall() {

    internals.isInCallState = true;
    internals.setIcon('hangUp');
    const tabs = await browser.tabs.query({
      currentWindow: true,
      active: true
    });

    internals.createAudioElement(browser.runtime.getURL('sounds/tada.wav'));
  },

  hangUp() {

    document.querySelectorAll('audio').forEach((audioElement) => audioElement.remove());
    internals.setIcon('call');
    internals.isInCallState = false;
  },

  createAudioElement(source) {

    const audioElement = document.createElement('audio');
    audioElement.src = source;
    audioElement.autoplay = 'autoplay';
    document.querySelector('body').appendChild(audioElement);
  },

  isInCall() {
    return internals.isInCallState; // this should be replaced with actually checking the built stuff
  },

  setIcon(iconSet) {

    browser.browserAction.setIcon({
      path: internals.icons[iconSet]
    });
  }
};

browser.browserAction.onClicked.addListener(internals.onClick);