import internal from 'stream'

import { Tag } from 'antd'
import { Row, Col, Typography, Button } from 'antd'
import dayjs from 'dayjs'
import React, { useState } from 'react'
import ReactMarkdown from 'react-markdown'

import {
  JiraIssueInJira,
  JiraIssueCustomerInfo,
  JiraIssueCustomerEnvironment
} from 'apiClient/services/devops/interface'
import { ClusterDetailLinkPopover } from 'components/DetailLinkPopover/ClusterDetailLinkPopover'
import { TenantDetailLinkPopover } from 'components/DetailLinkPopover/TenantDetailLinkPopover'
import { toLocal } from 'utils/time'

export function IssueStatusDisplay({ status }: { status: string }) {
  var color = 'gray'
  switch (status) {
    case 'Todo':
      color = 'volcano'
      break
    case 'UNDER INVESTIGATION':
      color = 'blue'
      break
    case 'Waiting for support':
      color = 'orange'
      break
    case 'Resolved':
      color = 'green'
      break
    case 'Closed':
      color = 'gray'
      break
  }

  return <Tag color={color}>{status}</Tag>
}

export function IssueTimeDisplay({
  created_at,
  resolved_at
}: {
  created_at?: number
  resolved_at?: number
}) {
  return (
    <Row>
      <Col span={24}>
        <Typography.Text>Created at: {toLocal(created_at)}</Typography.Text>
      </Col>

      {resolved_at && (
        <Col span={24}>
          <Typography.Text>Resolved at: {toLocal(resolved_at)}</Typography.Text>
        </Col>
      )}
    </Row>
  )
}

export function IssueClusterTenantDisplay({
  jira_data
}: {
  jira_data?: JiraIssueCustomerInfo
}) {
  const cluster_id = jira_data?.cluster_id || '-'
  const tenant_id = jira_data?.tenant_id || '-'

  const renderEnvironment = () => {
    if (jira_data?.environment === JiraIssueCustomerEnvironment.on_premise) {
      return (
        <>
          <Typography.Text>Environment: </Typography.Text>
          <Tag color="default">On-Premise</Tag>
        </>
      )
    }
    if (jira_data?.environment === JiraIssueCustomerEnvironment.cloud) {
      return (
        <>
          <Typography.Text>Environment: </Typography.Text>
          <Tag color="blue">Cloud</Tag>
        </>
      )
    }
    return (
      <>
        <Typography.Text>Environment: </Typography.Text>
        <Tag color="gray">-</Tag>
      </>
    )
  }

  const renderClusterID = () => {
    if (
      cluster_id === '-' ||
      jira_data?.environment === JiraIssueCustomerEnvironment.on_premise
    ) {
      return <Typography.Text>Cluster: {cluster_id}</Typography.Text>
    }
    return (
      <div>
        <Typography.Text>Cluster: </Typography.Text>
        <ClusterDetailLinkPopover clusterId={cluster_id} text={cluster_id} />
      </div>
    )
  }

  const renderTenantID = () => {
    if (
      tenant_id === '-' ||
      jira_data?.environment === JiraIssueCustomerEnvironment.on_premise
    ) {
      return <Typography.Text>Tenant: {tenant_id}</Typography.Text>
    }
    return (
      <div>
        <Typography.Text>Tenant: </Typography.Text>
        <TenantDetailLinkPopover
          tenantId={tenant_id}
          text={tenant_id}
        ></TenantDetailLinkPopover>
      </div>
    )
  }

  return (
    <Row>
      <Col span={24}>{renderEnvironment()}</Col>

      <Col span={24}>{renderClusterID()}</Col>

      <Col span={24}>{renderTenantID()}</Col>
    </Row>
  )
}

export function ExpandableMarkdown({ text }: { text: string }) {
  const [isExpanded, setIsExpanded] = useState(false)

  const hasMore = text && text.includes('\n')
  const firstLine = hasMore ? text.split('\n')[0] : text

  if (!hasMore) {
    return (
      <ReactMarkdown
        components={{
          h1: ({ node, ...props }) => (
            <h1 style={{ fontSize: '16px' }} {...props} />
          ),
          h2: ({ node, ...props }) => (
            <h1 style={{ fontSize: '15px' }} {...props} />
          )
        }}
      >
        {text || '-'}
      </ReactMarkdown>
    )
  }

  return (
    <div>
      <ReactMarkdown
        components={{
          h1: ({ node, ...props }) => (
            <h1 style={{ fontSize: '17px' }} {...props} />
          ),
          h2: ({ node, ...props }) => (
            <h2 style={{ fontSize: '16px' }} {...props} />
          ),
          h3: ({ node, ...props }) => (
            <h3 style={{ fontSize: '15px' }} {...props} />
          ),
          h4: ({ node, ...props }) => (
            <h4 style={{ fontSize: '14px' }} {...props} />
          ),
          h5: ({ node, ...props }) => (
            <h5 style={{ fontSize: '13px' }} {...props} />
          )
        }}
      >
        {isExpanded ? text : firstLine}
      </ReactMarkdown>

      <Button
        type="link"
        onClick={() => setIsExpanded(!isExpanded)}
        style={{ padding: 0, height: 'auto' }}
      >
        {isExpanded ? 'hide' : 'expand'}
      </Button>
    </div>
  )
}