import { Select, Space, Table, Tag, Typography } from 'antd'
import { FilterValue } from 'antd/es/table/interface'
import { ColumnsType } from 'antd/lib/table'
import React, { useMemo, useState } from 'react'

import { FormsCertificate } from 'apiClient/api/interface'

export const CertificateTable: React.FC<
  React.PropsWithChildren<{
    loading?: boolean
    data: FormsCertificate[]
  }>
> = ({ data, loading }) => {
  // Filter
  const [filteredInfo, setFilteredInfo] = useState<
    Record<string, FilterValue | null>
  >({})
  const clearFilters = () => {
    setFilteredInfo({})
  }

  const columns = useMemo(() => {
    const cols: ColumnsType<FormsCertificate> = [
      {
        title: 'Cluster',
        width: 170,
        fixed: 'left',
        dataIndex: 'id',
        render: (_, record) => (
          <Space direction="vertical">
            {record.cluster_name ? (
              <Typography.Text
                style={{ width: 170 }}
                ellipsis={{ tooltip: record.cluster_name }}
              >
                {record.cluster_name}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
            <Typography.Text type="secondary">
              {record.cluster_id}
            </Typography.Text>
          </Space>
        )
      },
      {
        title: 'Tenant',
        width: 170,
        dataIndex: 'tenant_id',
        render: (_, record) => (
          <Space direction="vertical">
            {record.tenant_alias ? (
              <Typography.Text
                style={{ width: 170 }}
                ellipsis={{ tooltip: record.tenant_alias }}
              >
                {record.tenant_alias}
              </Typography.Text>
            ) : record.tenant_name ? (
              <Typography.Text
                style={{ width: 170 }}
                ellipsis={{ tooltip: record.tenant_name }}
              >
                {record.tenant_name}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
            <Typography.Text type="secondary">
              {record.tenant_id}
            </Typography.Text>
          </Space>
        )
      },
      {
        title: 'Biz Region',
        width: 100,
        dataIndex: 'biz_region',
        render: (_: any, record) => {
          return record.biz_region != undefined
            ? renderTagsForBizRegion(record.biz_region)
            : '-'
        }
      },
      {
        title: 'Topology',
        width: 120,
        dataIndex: 'topology',
        render: (_: any, record) =>
          record.topology != undefined ? (
            <div>
              tidb-{record.topology.tidb} pd-{record.topology.pd}
              <br />
              tikv-{record.topology.tikv} tiflash-{record.topology.tiflash}
            </div>
          ) : (
            '-'
          )
      },
      {
        title: 'Certificate Validity (UTC+8)',
        children: [
          {
            title: 'db-tidb-server-secret',
            width: 180,
            render: (_: any, record) => {
              return renderTagsForTime(record.db_tidb_server_secret)
            }
          },
          {
            title: 'db-cluster-client-secret',
            width: 180,
            render: (_, record) => {
              return renderTagsForTime(record.db_cluster_client_secret)
            }
          },
          {
            title: 'db-pd-cluster-secret',
            width: 180,
            render: (_: any, record) => {
              return renderTagsForTime(record.db_pd_cluster_secret)
            }
          },
          {
            title: 'db-tidb-cluster-secret',
            width: 180,
            render: (_: any, record) => {
              return renderTagsForTime(record.db_tidb_cluster_secret)
            }
          },
          {
            title: 'db-tikv-cluster-secret',
            width: 180,
            render: (_: any, record) => {
              return renderTagsForTime(record.db_tikv_cluster_secret)
            }
          },
          {
            title: 'db-tiflash-cluster-secret',
            width: 180,
            render: (_, record) => {
              let time = renderTagsForTime(record.db_tiflash_cluster_secret)
              return time != ''
                ? time
                : record.topology?.tiflash == 0
                ? '-'
                : 'null'
            }
          }
        ]
      },
      {
        title: 'Status',
        dataIndex: 'status',
        fixed: 'right',
        width: 125,
        render: (_: any, record) =>
          record.cluster_status
            ? record.cluster_status
                .replace('USER_CLUSTER_STATUS_', '')
                .toLowerCase()
            : '-'
      }
    ]
    return cols
  }, [])
  return (
    <Table
      loading={loading}
      columns={columns}
      dataSource={data || []}
      rowKey="id"
      // scroll={{ x: 2200 }}
    ></Table>
  )
}

const RegionSelect: React.FC<
  React.PropsWithChildren<{ onChangeFunc: (region: string) => void }>
> = ({ onChangeFunc }) => (
  <div>
    <Select
      defaultValue="us-west-2.aws"
      style={{ width: 200 }}
      onChange={onChangeFunc}
      options={[
        { label: 'aws / us-west-2', value: 'us-west-2.aws' },
        { label: 'aws / us-east-1', value: 'us-east-1.aws' },
        { label: 'aws / ap-south-1', value: 'ap-south-1.aws' },
        { label: 'aws / ap-southeast-1', value: 'ap-southeast-1.aws' },
        { label: 'aws / ap-southeast-2', value: 'ap-southeast-2.aws' },
        { label: 'aws / ap-southeast-3', value: 'ap-southeast-3.aws' },
        { label: 'aws / ap-southeast-5', value: 'ap-southeast-5.aws' },
        { label: 'aws / ap-northeast-1', value: 'ap-northeast-1.aws' },
        { label: 'aws / ap-northeast-2', value: 'ap-northeast-2.aws' },
        { label: 'aws / eu-central-1', value: 'eu-central-1.aws' },
        { label: 'aws / sa-east-1', value: 'sa-east-1.aws' },

        { label: 'gcp / us-west1', value: 'us-west1.gcp' },
        { label: 'gcp / us-east4', value: 'us-east4.gcp' },
        { label: 'gcp / us-central1', value: 'us-central1.gcp' },
        { label: 'gcp / asia-northeast1', value: 'asia-northeast1.gcp' },
        { label: 'gcp / asia-northeast2', value: 'asia-northeast2.gcp' },
        { label: 'gcp / asia-southeast1', value: 'asia-southeast1.gcp' },
        { label: 'gcp / asia-east1', value: 'asia-east1.gcp' },
        { label: 'gcp / ap-southeast3', value: 'ap-southeast3.gcp' },

        { label: 'azure / southeastasia', value: 'southeastasia.azure' },
        { label: 'azure / japaneast', value: 'japaneast.azure' },
        { label: 'azure / eastus', value: 'eastus.azure' }
      ]}
    />
  </div>
)

export default RegionSelect

const renderTime = (expireSecond: number) => {
  let expireDateStr = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).format(expireSecond * 1000)

  let leftTime = (expireSecond - new Date().getTime() / 1000) / 3600 / 24

  let color = 'green'

  if (leftTime > 365) {
    color = 'green'
  } else if (60 < leftTime && leftTime <= 365) {
    color = 'orange'
  } else {
    color = 'red'
  }

  return (
    <Tag style={{ fontSize: '14px' }} color={color} key={expireDateStr}>
      {expireDateStr}
    </Tag>
  )
}

const regionColors: Record<string, string> = {
  JP: 'orange',
  APAC: 'magenta',
  NA: 'geekblue',
  EMEA: 'green'
}

const renderTagsForBizRegion = (s: string) => {
  var regions = s.split(' ')
  return regions.map((region) => (
    <Tag color={regionColors[region] ? regionColors[region] : 'purple'}>
      {region}
    </Tag>
  ))
}

const renderTagsForTime = (s: number | undefined) => {
  return s != undefined && s != 0 ? renderTime(s) : ''
}