import { useEffect } from 'hono/jsx'
import { apps, setSelectedApp } from '../state'
import {
  DashboardContainer,
  DashboardHeader,
  DashboardSubtitle,
  DashboardTitle,
  StatusDot,
  StatusDotLink,
  StatusDotsRow,
} from '../styles'
import { update } from '../update'
import { UnifiedLogs, initUnifiedLogs } from './UnifiedLogs'
import { Vitals, initVitals } from './Vitals'

export function DashboardLanding() {
  useEffect(() => {
    initUnifiedLogs()
    initVitals()
  }, [])

  return (
    <DashboardContainer>
      <DashboardHeader>
        <DashboardTitle>🐾 Toes</DashboardTitle>
        {/*<DashboardSubtitle>Your personal web appliance</DashboardSubtitle>*/}
      </DashboardHeader>

      <StatusDotsRow>
        {[...apps.filter(a => !a.tool), ...apps.filter(a => a.tool)].map(app => (
          <StatusDotLink key={app.name} data-tooltip={app.name} onClick={(e: Event) => {
            e.preventDefault()
            setSelectedApp(app.name)
            update()
          }}>
            <StatusDot state={app.state} data-app={app.name} />
          </StatusDotLink>
        ))}
      </StatusDotsRow>

      <Vitals />

      <UnifiedLogs />
    </DashboardContainer>
  )
}