import { Card, Descriptions, Typography, Tag } from 'antd'
import moment from 'moment'
import React, { useEffect, useState } from 'react'
import { useParams, useHistory, useLocation, Link } from 'react-router-dom'

import { useGetClusterDetailOfDedicatedSLA } from 'apiClient/services/devops'
import {
  DashboardGetClusterDetailOfDedicatedSLAResp,
  EntitySLAStatus
} from 'apiClient/services/devops/interface'

import DowntimeTimeline from './Timeline'

const { Title } = Typography

export default function SLAClusterDetailPage() {
  const { cluster_id } = useParams<{ cluster_id: string }>()
  console.log('cluster_id', cluster_id)
  return (
    <>
      <SLAClusterDetail cluster_id={cluster_id} />
    </>
  )
}

function getStatusTagColor(status: EntitySLAStatus | undefined) {
  switch (status) {
    case EntitySLAStatus.breach:
      return 'red'
    case EntitySLAStatus.warning:
      return 'orange'
    case EntitySLAStatus.perfect:
      return 'green'
    default:
      return 'default'
  }
}

export const SLAClusterDetail: React.FC<
  React.PropsWithChildren<{ cluster_id: string }>
> = ({ cluster_id }) => {
  const history = useHistory()
  const location = useLocation()
  const query = new URLSearchParams(location.search)
  let month = query.get('month')
  const currentMonth = moment().utc().format('YYYY/M')

  const [includeFake, setIncludeFake] = useState(false)

  useEffect(() => {
    if (!month) {
      history.replace(`/sla/${cluster_id}/detail?month=${currentMonth}`)
    }
  }, [month, history, currentMonth])

  const { data, isLoading, refetch } = useGetClusterDetailOfDedicatedSLA({
    month: month || currentMonth,
    includeFake: includeFake,
    clusterID: cluster_id
  })
  const cluster =
    (data?.data as DashboardGetClusterDetailOfDedicatedSLAResp) || {}

  return (
    <>
      <Card title={<Title level={4}>SLA Detail</Title>} bordered={false}>
        <Descriptions>
          <Descriptions.Item label="Tenant">
            {cluster.tenantName}(
            <Link
              to={`/orgs/${cluster.tenantID}?name=${cluster.tenantName}`}
              target="_blank"
            >
              {cluster.tenantID}
            </Link>
            )
          </Descriptions.Item>
          <Descriptions.Item label="Cluster">
            {cluster.clusterName} (
            <Link
              to={`/orgs/${cluster.tenantID}/clusters/${cluster.clusterID}`}
              target="_blank"
            >
              {cluster.clusterID}
            </Link>
            )
          </Descriptions.Item>
          <Descriptions.Item label="Is Deleted">
            {cluster.deleted ? 'Yes' : 'No'}
          </Descriptions.Item>
          <Descriptions.Item label="SLA Status">
            <Tag color={getStatusTagColor(cluster.slaStatus)}>
              {cluster.slaStatus ? cluster.slaStatus : '-'}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="SLA Value">
            {cluster.slaValue?.toFixed(5)}
          </Descriptions.Item>
          <Descriptions.Item label="TiDB Nodes">
            {cluster.tidbInstance
              ? cluster.tidbInstance > 1
                ? 'Multiple'
                : 'Single'
              : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="Jira Issue">
            {cluster.issueKey ? (
              <a
                href={`https://tidb.atlassian.net/browse/${cluster.issueKey}`}
                target="_blank"
                rel="noreferrer"
              >
                {cluster.issueKey}
              </a>
            ) : (
              '-'
            )}
          </Descriptions.Item>
          <Descriptions.Item label="Jira Issue Status">
            {cluster.issueStatus ? cluster.issueStatus : '-'}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <DowntimeTimeline
        month={month || moment().utc().format('YYYY/M')}
        downtimeList={cluster.downtimeList || []}
        onIncludeFakeChange={(includeFake) => setIncludeFake(includeFake)}
      />
    </>
  )
}