Array.from(document.getElementsByClassName('link')).forEach((element) => {
  element.addEventListener('click', (event) => {
    const newTab = browser.tabs.create({
      url: event.currentTarget.dataset.url
    });
    newTab.then((data) => {
      // console.log(data);
    }).catch((error) => {
      console.error(error);
    });
  });
});

browser.runtime.getBackgroundPage().then((page) => {
  updateNextEvent(page.calendar[0]);
  updateSpaceApiJson(page.spaceApi);
}).catch((error) => {
  console.error(error);
});

const updateNextEvent = (nextEvent) => {
  const calendarElement = document.getElementById('calendar');
  const strongElement = document.createElement('strong');
  strongElement.textContent = nextEvent.name;
  const dateNode = document.createTextNode(' ' + new Date(nextEvent.begin).toLocaleString());
  calendarElement.innerText = '';
  calendarElement.append(strongElement);
  calendarElement.append(dateNode);
  if (nextEvent.location) {
    const locationNode = document.createTextNode(' (' + nextEvent.location + ')');
    calendarElement.append(locationNode);
  }
};

const updateSpaceApiJson = (spaceApi) => {
  const spaceApiElement = document.getElementById('space-api');
  const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, '&nbsp;').replace(/\n/g, '<br/>');
  spaceApiElement.innerHTML = json;
  // const jsonNode = document.createTextNode(json);
  // spaceApiElement.innerText = '';
  // spaceApiElement.append(jsonNode);
};