import { Center, Title } from '@mantine/core'
import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react'

export default function OverallStatus({
  state,
}: {
  state: { overallUp: number; overallDown: number; lastUpdate: number }
}) {
  let statusString = ''
  let icon = (
    <IconAlertCircle style={{ width: 64, height: 64, color: '#b91c1c' }} />
  )
  if (state.overallUp === 0 && state.overallDown === 0) {
    statusString = 'No data yet'
  } else if (state.overallUp === 0) {
    statusString = 'All systems not operational'
  } else if (state.overallDown === 0) {
    statusString = 'All systems operational'
    icon = (
      <IconCircleCheck style={{ width: 64, height: 64, color: '#059669' }} />
    )
  } else {
    statusString = `Some systems not operational (${state.overallDown} out of ${
      state.overallUp + state.overallDown
    })`
  }

  return (
    <>
      <Center>{icon}</Center>
      <Title mt="sm" style={{ textAlign: 'center' }} order={1}>
        {statusString}
      </Title>
      <Title
        mt="sm"
        style={{ textAlign: 'center', color: '#70778c' }}
        order={5}
      >
        Last updated on:{' '}
        {`${new Date(state.lastUpdate * 1000).toLocaleString()} (${
          Math.round(Date.now() / 1000) - state.lastUpdate
        } sec ago)`}
      </Title>
    </>
  )
}