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);
  updateSpaceApiJson(page.spaceApi);
  updateState(page.spaceApi);
}).catch((error) => {
  console.error(error);
});

const updateNextEvent = (nextEvents) => {
  const calendarElement = document.getElementById('calendar');
  calendarElement.innerText = '';

  if (nextEvents.length === 0) {
    const hintNode = document.createTextNode('Keine Termine in den nächsten 4 Wochen!');
    const strongElement = document.createElement('strong');
    strongElement.append(hintNode);
    calendarElement.append(strongElement);
    return;
  }

  const nextEventDate = nextEvents[0].begin.substr(0, 10);
  const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));

  nextEventDateEvents.forEach((nextEventDateEvent) => {
    const divElement = document.createElement('div');
    divElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
    const beginDate = new Date(nextEventDateEvent.begin);
    const strongElement = document.createElement('strong');
    const timeElement = document.createElement('time');
    strongElement.textContent = nextEventDateEvent.name;
    timeElement.datetime = beginDate.toISOString();
    const dateNode = document.createTextNode(beginDate.toLocaleString());
    // divElement.innerText = '';
    divElement.append(strongElement);
    divElement.append(document.createTextNode(' '));
    divElement.append(timeElement);
    timeElement.append(dateNode);
    if (nextEventDateEvent.location) {
      const locationNode = document.createTextNode(' (' + nextEventDateEvent.location + ')');
      divElement.append(locationNode);
    }
    calendarElement.append(divElement);
  });
};

const updateSpaceApiJson = (spaceApi) => {
  const spaceApiElement = document.querySelector('#space-api code');
  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);
};

const updateState = (spaceApi) => {
  const stateElement = document.getElementById('state');
  const since = new Date(spaceApi.state.lastchange * 1000);
  const sinceStr = ' seit <time datetime="' + since.toISOString() + '">' + since.toLocaleString() + '</time>';
  if (spaceApi.state.open) {
    stateElement.innerHTML = '<img src="../icons/font-awesome/lock-open-solid.svg" width="19" height="19" alt="Offen" />Offen' + sinceStr;
  } else {
    stateElement.innerHTML = '<img src="../icons/font-awesome/lock-solid.svg" width="19" height="19" alt="Geschlossen" />Geschlossen' + sinceStr;
  }
};