import './style.css'
import { showLogin } from './login'
import { mountShell } from './shell'

const app = document.getElementById('app')!

// Try to resume a session from stored credentials
const user = sessionStorage.getItem('blekin_user')
const pass = sessionStorage.getItem('blekin_pass')

if (user && pass) {
  app.innerHTML = '<div class="login"><div class="login-form"><h1>Reconnecting...</h1></div></div>'
  fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username: user, password: pass }),
  })
    .then(r => r.ok ? r.json() : Promise.reject())
    .then(data => {
      mountShell(app, { appletId: data.applet_id, port: data.port, boardName: data.board_name })
    })
    .catch(() => {
      sessionStorage.removeItem('blekin_user')
      sessionStorage.removeItem('blekin_pass')
      showLogin(app)
    })
} else {
  showLogin(app)
}