import './components/app-shell'
import './components/login-page'
import './components/days-page'
import './components/day-detail-page'
import './components/track-map'
import { route, startRouter } from './router'

const app = document.getElementById('app')!
app.innerHTML = '<app-shell></app-shell>'

const shell = app.querySelector('app-shell') as HTMLElement & { setPage: (el: HTMLElement) => void }

route('/login', () => {
  shell.setPage(document.createElement('login-page'))
})

route('/days', () => {
  shell.setPage(document.createElement('days-page'))
})

route('/days/:date', ({ date }) => {
  const el = document.createElement('day-detail-page') as HTMLElement & { date: string }
  el.date = date
  shell.setPage(el)
})

startRouter()