import { component, unmount } from 'riot'
import App from './components/app.riot'
import PageDetail from './components/page-detail.riot'
import Comparateur from './components/comparateur.riot'
import 'chart.css'
import './style.css'
import EstimationChances from './components/estimation-chances.riot'

const app = document.getElementById('app')
let currentComponent = null

function navigate()
{
  const hash = window.location.hash

  if (currentComponent)
  {
    unmount(app, true)
  }

  if (hash.startsWith('#/formation/'))
  {
    const id = hash.replace('#/formation/', '')
    currentComponent = component(PageDetail)(app, { id })
  }

  else if (hash === '#/comparateur')
  {
    currentComponent = component(Comparateur)(app)
  }

  else if (hash === '#/estimation')
  {
    currentComponent = component(EstimationChances)(app)
  }

  else
  {
    currentComponent = component(App)(app)
  }
  
}

window.addEventListener('hashchange', navigate)
navigate()