import React from 'react'

import { Flex, Group, Loader, Space, Text, Title } from '@mantine/core'
import { Typography } from 'antd'
import ReactJson from 'react-json-view'

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

import { useGetGroup } from '../shared/api'
import { EventCard } from '../shared/components/EventCard'
import { EventCharts } from '../shared/components/EventCharts'
import { EventTimeline } from '../shared/components/EventTimeline'

interface InfoField {
  key: string
  label: string
  className?: string
  render?: (v: ActivitiesGetActivityResponse) => React.ReactNode
}

const infoFields: InfoField[] = [
  {
    key: 'application_id',
    label: 'Org ID'
  },
  {
    key: 'concept_id',
    label: 'Project ID'
  },
  {
    key: 'target_id',
    label: 'Cluster ID'
  },
  {
    key: 'source',
    label: 'Source'
  },
  {
    key: 'name',
    label: 'Event Name',
    render: (v) => v.display_name || v.name
  },
  {
    key: 'summary',
    label: 'Summary',
    render: (v) => (v.payload as any)?.summary
  },
  {
    key: 'catalog',
    label: 'Category'
  },
  {
    key: 'time',
    label: 'Time',
    render: (v) => formatDateTimeWithTz(v.calibration_time!)
  },
  {
    key: 'payload',
    label: 'Payload',
    className: 'col-span-2',
    render: (v) => (
      <ReactJson
        src={v}
        collapsed={1}
        displayDataTypes={false}
        style={{ wordBreak: 'break-all' }}
      />
    )
  }
]

interface DetailInfoProps {
  detailInfo: ActivitiesGetActivityResponse
}

export const DetailInfo: React.FC<DetailInfoProps> = ({ detailInfo }) => {
  const { data, error } = useGetGroup({ groupId: detailInfo.context_id! })
  const loading = !data && !error

  return (
    <div className='px-6 pt-4 pb-6'>
      <div className='grid grid-cols-2 gap-3'>
        {infoFields.map((f) => (
          <Flex key={f.key} className={f.className}>
            <div className='basis-24 shrink-0'>
              <Text fz='sm'>{f.label}:</Text>
            </div>
            <div className='grow-0 overflow-hidden'>
              {f.render?.(detailInfo) || (
                <Typography.Paragraph
                  className='!mb-0'
                  ellipsis={{ rows: 1, expandable: true, symbol: 'more' }}
                >
                  {(detailInfo as any)[f.key]}
                </Typography.Paragraph>
              )}
            </div>
          </Flex>
        ))}
      </div>

      <Space h='lg' />

      <Title order={6} color='gray' mt='md' mb='xs'>
        Event Group Info
      </Title>

      <Space h='sm' />

      {loading ? (
        <Group className='py-4' position='center'>
          <Loader variant='bars' size='xs' />
        </Group>
      ) : (
        !!data?.data.activities?.length && (
          <EventCard>
            <EventTimeline eventGroup={data?.data!} />
            <EventCharts eventGroup={data?.data!} />
          </EventCard>
        )
      )}
    </div>
  )
}