import { Styles } from '@because/forge'
import { Modal } from './modal'
import { apps, selectedApp } from '../state'
import { EmptyState, Layout } from '../styles'
import { AppDetail } from './AppDetail'
import { Sidebar } from './Sidebar'

export function Dashboard({ render }: { render: () => void }) {
  const selected = apps.find(a => a.name === selectedApp)

  return (
    <Layout>
      <Styles />
      <Sidebar render={render} />
      {selected ? (
        <AppDetail app={selected} render={render} />
      ) : (
        <EmptyState>Select an app to view details</EmptyState>
      )}
      <Modal />
    </Layout>
  )
}
