import { Flex, Typography } from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable } from '@tidbcloud/uikit/biz'
import { capitalize } from 'lodash-es'
import React, { useMemo } from 'react'

import TimeComponent from 'dbaas/components/TimeComponent'

import EventStatusIndicator from './EventStatusIndicator'
import { EventItem } from './model'

function useEventsColumns() {
  const columns = useMemo<MRT_ColumnDef<EventItem>[]>(() => {
    const cols: MRT_ColumnDef<EventItem>[] = [
      {
        id: 'event_type',
        header: 'Event Type',
        accessorFn: (row) => <Typography variant="label-lg">{row.type}</Typography>
      },
      {
        id: 'status',
        header: 'Status',
        accessorFn: (row) => <EventStatusIndicator label={capitalize(row.status)} />
      },
      {
        id: 'message',
        header: 'Message',
        accessorFn: (row) => (
          <Flex maw={500} direction="column" sx={{ wordBreak: 'break-all' }}>
            {row.summary.split('\n').map((s, idx) => (
              <span key={idx}>{s}</span>
            ))}
          </Flex>
        ),
        mantineTableHeadCellProps: {
          align: 'left',
          style: {
            width: '33%'
          }
        }
      },
      {
        id: 'triggered_by',
        header: 'Triggered By',
        enableResizing: false,
        accessorFn: (row) => row.author
      },
      {
        id: 'time',
        header: 'Time',
        enableResizing: false,
        accessorFn: (row) => <TimeComponent time={row.calibration_time} />
      }
    ]
    return cols
  }, [])

  return columns
}

const EventsTable: React.FC<React.PropsWithChildren<{ events: EventItem[]; loading: boolean }>> = ({
  events,
  loading
}) => {
  const eventsColumns = useEventsColumns()

  return (
    <ProTable<EventItem>
      emptyMessage="No Data"
      columns={eventsColumns}
      data={events}
      state={{ isLoading: loading }}
      mantinePaperProps={{ mx: 24 }}
    />
  )
}

export default EventsTable