import React from 'react'

import { createStyles, Space, Stepper } from '@mantine/core'

import { ActivitiesActivityGroup } from '@clinic/client'
import { formatDateTimeWithTz } from '~/utils/date-time'

interface EventTimelineProps {
  eventGroup: ActivitiesActivityGroup
}

export const EventTimeline: React.FC<EventTimelineProps> = ({ eventGroup }) => {
  const { classes } = useStyles()
  const rules = eventGroup.rule
  const eventsInRules = eventGroup.activities?.filter((e) =>
    rules?.includes(e.name!)
  )
  const eventsInRulesMap = new Map(eventsInRules?.map((e) => [e.name, e]) || [])
  const lastActivity = eventsInRules?.[eventsInRules?.length - 1]
  const activeIndex = rules?.findIndex((r) => r === lastActivity?.name) || 0
  const active =
    activeIndex === (rules?.length || 0) - 1 ? rules?.length! : activeIndex

  return (
    <>
      {rules && rules.length > 1 && (
        <>
          <Stepper classNames={classes} size='sm' active={active}>
            {rules?.map((r, index) => {
              const evt = eventsInRulesMap.get(r)
              return evt ? (
                <Stepper.Step
                  label={evt.display_name || evt.name}
                  description={formatDateTimeWithTz(evt.calibration_time!)}
                  loading={index !== rules.length - 1 && index === active}
                  key={index}
                />
              ) : (
                <Stepper.Step label={r} key={index} />
              )
            })}
          </Stepper>
          <Space h='xl' />
          <Space h='xl' />
        </>
      )}
    </>
  )
}

const useStyles = createStyles((theme, _params) => ({
  separator: {
    backgroundColor:
      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.white
  },

  stepIcon: {
    borderColor: 'transparent',
    backgroundColor:
      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.white
  }
}))