import { useMantineTheme } from '@tidbcloud/uikit'
import { lowerCase } from 'lodash-es'
import React from 'react'

import { StatusIndicator } from '../../components/StatusIndicator'

import { EventStatus } from './helpers'

const EventStatusIndicator: React.FC<React.PropsWithChildren<{ label: string }>> = ({ label }) => {
  const theme = useMantineTheme()
  const statusMap: { [k in EventStatus]: { dotColor?: string; dotFill?: boolean } } = {
    started: {},
    succeeded: {
      dotFill: true
    },
    failed: {
      dotColor: theme.colors.red[7],
      dotFill: true
    },
    cancelled: {
      dotColor: theme.colors.yellow[7],
      dotFill: true
    },
    skipped: {
      dotColor: theme.colors.yellow[7],
      dotFill: true
    },
    running: {}
  }
  const { dotColor, dotFill } = statusMap[lowerCase(label) as EventStatus] ?? {}

  return <StatusIndicator label={label} dotColor={dotColor ?? theme.colors.green[7]} dotFill={dotFill ?? false} />
}

export default EventStatusIndicator