import { Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useParams } from 'react-router-dom'

import { useWorkflowNotification } from 'apiClient/services/notification'
import { FormsNotificationsSummary } from 'apiClient/services/notification/interface'

export default function NotificationStatistics() {
  const params = useParams<{ workflow_id: string }>()

  const { data, isFetching } = useWorkflowNotification(params.workflow_id, {
    query: {
      refetchOnWindowFocus: false,
      refetchInterval: false,
      refetchIntervalInBackground: false,
      retry: false
    }
  })

  const columns: ColumnsType<FormsNotificationsSummary> = [
    {
      title: 'Channels',
      dataIndex: 'channels',
      render: (text) => text.join(',')
    },
    {
      title: 'Count',
      dataIndex: 'count'
    },
    {
      title: 'Date',
      dataIndex: 'date'
    }
  ]

  return (
    <Table
      loading={isFetching}
      dataSource={data?.data || []}
      pagination={false}
      columns={columns}
    />
  )
}