import React, { useRef } from 'react'

import { Flex, Group, Loader, Space, Text } from '@mantine/core'
import dayjs from 'dayjs'

import { ActivitiesActivityGroup } from '@clinic/client'
import { useQueryParams } from '~/hooks/use-query-params'
import { recentEventTelemetry } from '~/telemetry/event-center'

import { useListEventGroups } from '../shared/api'
import { SeveritySelect } from '../shared/components/SeveritySelect'
import { Severity } from '../shared/types'
import { EventGroupCard, Status } from './EventGroupCard'

const DEFAULT_TIMERANGE = 24 * 60 * 60

const RecentEventPage: React.FC = () => {
  const { queryParams, setQueryParams } = useQueryParams({
    severity: Severity.Info
  })
  const now = dayjs(Date.now()).unix()
  const timeRange = useRef<[number, number]>([now - DEFAULT_TIMERANGE, now])
  const { data, error } = useListEventGroups({
    timeRange: timeRange.current,
    severity: queryParams.severity
  })
  const loading = !data && !error
  const groups = data?.data.activity_groups

  return (
    <div>
      <Flex justify='space-between' align='center'>
        <Text c='dimmed'>
          {loading ? '...' : groups?.length || 0}{' '}
          {groups?.length === 1 ? 'event' : 'events'} in 24 hours.
        </Text>
        <Flex align='center'>
          <Text>Severity</Text>
          <Space w='xs' />
          <SeveritySelect
            label={false}
            value={queryParams.severity}
            onChange={(v) => {
              setQueryParams({ severity: v })
              recentEventTelemetry.changeSeverity(v as any)
            }}
          />
        </Flex>
      </Flex>

      <Space h='md' />

      {loading ? (
        <Group position='center'>
          <Loader variant='bars' size='xs' />
        </Group>
      ) : (
        <Events events={data?.data.activity_groups!} />
      )}
    </div>
  )
}

const Events = ({ events }: { events: ActivitiesActivityGroup[] }) => {
  return (
    <div>
      {events?.map((eventGroup, i) => {
        return (
          <React.Fragment key={i}>
            <EventGroupCard
              eventGroup={eventGroup}
              defaultExpanded={eventGroup.status === Status.Processing && i < 5}
            />
            <Space h='xs' />
          </React.Fragment>
        )
      })}
    </div>
  )
}

export default RecentEventPage