import { FileTextOutlined } from '@ant-design/icons'
import { Timeline, Space, Table, Typography, Card, Empty } from 'antd'

import { useListIncidentLogs } from 'apiClient/services/devops'
import {
  EntityIncident,
  EntityIncidentLogItem,
  IncidentListIncidentLogsResp
} from 'apiClient/services/devops/interface'

type IncidentTimelineItem = Pick<
  EntityIncidentLogItem,
  'created_at' | 'description' | 'item_type' | 'postmortem_url' | 'event_time'
>

const timelineCardStyle = {
  width: 'min(960px, calc(100vw - 360px))',
  minWidth: 520,
  maxWidth: '100%'
}

function App({
  incident_id,
  record
}: {
  incident_id: string
  record: EntityIncident
}) {
  const { data } = useListIncidentLogs(Number(incident_id), {
    query: { refetchOnWindowFocus: false, refetchInterval: false }
  })

  if (!data) {
    return null
  } else {
    var logItems = {
      incident_id: data.data.incident_id,
      items: [...data.data.items!]
    }

    console.log('logItems:', logItems)
    // HACK, need fix
    if (!!record.incident_start_time)
      logItems.items?.push({
        created_at: record.incident_start_time,
        event_time: record.incident_start_time,
        description: 'Incident Start',
        item_type: 'milestone',
        postmortem_url: ''
      })
    console.log('logItems:', logItems)
    return (
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <IncidentTimeline log_items={logItems} />
      </Space>
    )
  }
}

export function IncidentTimeline({
  log_items
}: {
  log_items: IncidentListIncidentLogsResp
}) {
  const genTimelineItem = (logItem: IncidentTimelineItem, index: number) => {
    if (logItem.item_type === 'postmortem') {
      return (
        <Timeline.Item color="green" key={index}>
          {logItem.event_time ? logItem.event_time : logItem.created_at}
          <br></br>
          <Card size="small" style={timelineCardStyle}>
            <Typography.Link href={logItem.postmortem_url} target="_blank">
              <FileTextOutlined /> Post Mortem Doc
            </Typography.Link>
          </Card>
        </Timeline.Item>
      )
    } else {
      var title = 'General Event'
      if (logItem.item_type === 'milestone') title = 'Milestone'
      return (
        <Timeline.Item key={index}>
          {logItem.event_time ? logItem.event_time : logItem.created_at}
          <br></br>
          <Card size="small" title={title} style={timelineCardStyle}>
            {logItem.description}
          </Card>
        </Timeline.Item>
      )
    }
  }

  const sortItemsByTime: (
    a: EntityIncidentLogItem | undefined,
    b: EntityIncidentLogItem | undefined
  ) => number = (a, b) => {
    if (!a && !b) return 0
    if (!b) return 1
    if (!a) return -1
    const aTime = a!.event_time ? a.event_time : a.created_at!
    const bTime = b!.event_time ? b.event_time : b.created_at!
    return Date.parse(aTime) - Date.parse(bTime)
  }
  var items = log_items.items?.sort((a, b) => sortItemsByTime(b, a))

  return (
    <>
      {items && items.length > 0 ? (
        <Timeline mode="left">{items?.map(genTimelineItem)}</Timeline>
      ) : (
        <Empty />
      )}
    </>
  )
}

export function IncidentTableview({
  log_items
}: {
  log_items: IncidentListIncidentLogsResp
}) {
  const columns = [
    {
      title: 'Create Time',
      dataIndex: 'created_at',
      key: 'created_at'
    },
    {
      title: 'Event Description',
      key: 'description',
      dataIndex: 'description',
      render: (_: any, record: any) => {
        if (record.item_type === 'postmortem') {
          return <a href={record.postmortem_url}>Post Mortem Doc</a>
        } else {
          return record.description
        }
      }
    },
    {
      title: 'Status',
      key: 'status',
      dataIndex: 'status'
    }
  ]

  if (!log_items.items) {
    return null
  } else {
    return <Table columns={columns} dataSource={log_items.items} />
  }
}
export default App