import './styles/base.css';
import { route, start, navigate } from './router';
import { auth, restoreSession } from './api/embyApi';
import { renderShell } from './shell/Shell';
import { renderLogin } from './views/login/Login';
import { renderHome } from './views/home/Home';
import { renderLibrary } from './views/library/Library';
import { renderSeries } from './views/series/Series';
import { renderArtist } from './views/artist/Artist';
import { renderAlbum } from './views/album/Album';
import { renderPlaylist } from './views/playlist/Playlist';
import { renderPartyPlayer } from './views/player/Player';

route('/', () => navigate('/home'));
route('/login', renderLogin);
route('/home', renderHome);
route('/library/:id', renderLibrary);
route('/series/:id', renderSeries);
route('/artist/:id', renderArtist);
route('/album/:id', renderAlbum);
route('/playlist/:id', renderPlaylist);
route('/party/:id', renderPartyPlayer);

/**
 * Renders either the bare login screen or the full shell (sidebar +
 * routed content), depending on whether our session cookie is still
 * valid. Exported so Login.ts can call it again right after a successful
 * sign-in - there's no shell/router running yet at that point, just the
 * login form.
 */
export async function boot(): Promise<void> {
  const appEl = document.getElementById('app') as HTMLElement;
  const loggedIn = auth.isLoggedIn || await restoreSession();

  if (!loggedIn) {
    appEl.innerHTML = '';
    renderLogin(appEl);
    return;
  }

  const mainContent = await renderShell(appEl);
  start(mainContent);
}

boot();