import Formatter from './formatter'
import { createAnchorElement } from './html-creator'

export function displayEvents({ data, document, list }) {
  const locale = list.getAttribute('data-locale')
  const maxEventsCount = list.getAttribute('data-maximum')
  const timeZone = list.getAttribute('data-time-zone')
  const events = data.events ? data.events.elements : data.group.organizedEvents.elements
  const eventsCount = Math.min(maxEventsCount, events.length)
  for (let i = 0; i < eventsCount; i++) {
    const li = document.createElement('li')

    const a = createAnchorElement({ document, text: events[i].title, url: events[i].url })
    li.appendChild(a)

    const br = document.createElement('br')
    li.appendChild(br)

    const date = Formatter.formatDate({ locale, start: events[i].beginsOn, end: events[i].endsOn, timeZone })
    const textnode = document.createTextNode(date)
    li.appendChild(textnode)

    if (events[i].physicalAddress) {
      const location = Formatter.formatLocation({
        description: events[i].physicalAddress.description,
        locality: events[i].physicalAddress.locality
      })
      if (location) {
        const brBeforeLocation = document.createElement('br')
        li.appendChild(brBeforeLocation)

        const textnodeLocation = document.createTextNode(location)
        li.appendChild(textnodeLocation)
      }
    }

    list.appendChild(li)
  }
}

export function displayErrorMessage({ data, list }) {
  console.error(data)
  list.children[0].style.display = 'block'
}