import { useEffect, useState } from 'react'
import { api } from './api.js'
import Login from './Login.jsx'

export default function App() {
  const [session, setSession] = useState(null)
  const [loadError, setLoadError] = useState('')

  async function loadSession() {
    try {
      setSession(await api('session'))
    } catch (err) {
      setLoadError(err.message)
    }
  }

  useEffect(() => {
    loadSession()
  }, [])

  async function logout() {
    await api('logout', { method: 'POST' })
    loadSession()
  }

  if (loadError) return <main className="login"><p className="error">{loadError}</p></main>
  if (!session) return null
  if (!session.authenticated) {
    return <Login pinConfigured={session.pinConfigured} onLogin={loadSession} />
  }

  return (
    <div className="app">
      <header className="topbar">
        <span className="brand">FuerDieCuts</span>
        <button type="button" className="secondary" onClick={logout}>Abmelden</button>
      </header>
      <main className="content">
        <section className="card empty">
          <h1>Neues Video</h1>
          <p>Hier kommt als Nächstes der Import des WhatsApp-Exports hin.</p>
        </section>
      </main>
    </div>
  )
}