import { api } from '../api'
import { navigate } from '../router'

export class DaysPage extends HTMLElement {
  async connectedCallback(): Promise<void> {
    this.innerHTML = '<p>Lade...</p>'
    try {
      const days = await api.getDays()
      if (days.length === 0) {
        this.innerHTML = '<p>Noch keine Einträge.</p>'
        return
      }
      this.innerHTML = '<h1>Tage</h1><ul id="days-list"></ul>'
      const list = this.querySelector('#days-list')!
      for (const day of days) {
        const li = document.createElement('li')
        const a = document.createElement('a')
        a.href = `/days/${day.date}`
        a.textContent = `${day.date} (${day.count} Punkte)`
        a.addEventListener('click', (e) => { e.preventDefault(); navigate(`/days/${day.date}`) })
        li.appendChild(a)
        list.appendChild(li)
      }
    } catch (err) {
      this.innerHTML = `<p>Fehler: ${err}</p>`
    }
  }
}

customElements.define('days-page', DaysPage)