import { Button, Card, Descriptions, Modal, Space, Typography } from 'antd'
import React, { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'

import {
  excludeK8sUpgradeTaskCluster,
  getK8sUpgradeTaskCluster
} from '../../../../apiClient/services/devops'
import {
  K8supgradeK8sCluster,
  K8supgradeK8sInfo
} from '../../../../apiClient/services/devops/interface'

import { formatO11yNodeVersion, getO11yK8sNode } from './o11yNodes'

const { Title } = Typography

export const BasicInfo: React.FC<
  React.PropsWithChildren<{
    k8sInfo: K8supgradeK8sInfo
    k8sCluster: K8supgradeK8sCluster
  }>
> = ({ k8sInfo, k8sCluster }) => {
  const params = new URLSearchParams(window.location.search)
  const task_status = params.get('task_status') || ''
  const { task_id } = useParams<{ task_id: string }>()
  const { k8s_name } = useParams<{ k8s_name: string }>()
  const [reload, setReload] = useState(false)
  const [cluster, setCluster] = useState<K8supgradeK8sCluster>(k8sCluster)
  const o11yK8sNode = getO11yK8sNode(k8sInfo)

  async function fetch() {
    const data = (await getK8sUpgradeTaskCluster(task_id, k8s_name)).data
      .k8s_cluster
    setCluster(data!)
  }

  useEffect(() => {
    fetch()
  }, [reload])

  const handleClick = async () => {
    Modal.info({
      title: 'Info',
      closable: true,
      content: (
        <div>
          <p>
            Sure to exclude this K8S cluster <b>{k8s_name}</b> from the upgrade
            task?
          </p>
        </div>
      ),
      okText: 'Confirm',
      async onOk() {
        try {
          await excludeK8sUpgradeTaskCluster(task_id, k8s_name)
          Modal.success({
            title: 'info',
            content: (
              <div>
                <p>Successfully Exclude</p>
              </div>
            ),
            onOk() {}
          })
          setReload((pre) => !pre)
        } catch (error) {
          Modal.error({
            title: error.response.data.errcode,
            content: error.response.data.errmsg
          })
          setReload((pre) => !pre)
        }
      }
    })
  }

  return (
    <Card
      title={<Title level={4}>K8S Cluster Detail</Title>}
      bordered={false}
      extra={
        <Space>
          <Button
            type="primary"
            onClick={handleClick}
            danger
            disabled={task_status != 'pending' || cluster.is_excluded}
          >
            Exclude
          </Button>
        </Space>
      }
    >
      <Descriptions>
        <Descriptions.Item label="Name">{k8sInfo.k8s_name}</Descriptions.Item>
      </Descriptions>
      <Descriptions>
        <Descriptions.Item label="Task ID">
          {k8sCluster.task_id}
        </Descriptions.Item>
        <Descriptions.Item label="Tenant ID">
          {k8sInfo.tenant_id}
        </Descriptions.Item>
        <Descriptions.Item label="Project ID">
          {k8sInfo.project_id}
        </Descriptions.Item>
        <Descriptions.Item label="Cloud Provider">
          {k8sInfo.cloud_provider}
        </Descriptions.Item>
        <Descriptions.Item label="Region">{k8sInfo.region}</Descriptions.Item>
        <Descriptions.Item label="Upgrade Operation Status">
          {k8sCluster.upgrade_operation_status}
        </Descriptions.Item>
        <Descriptions.Item label="Maintenance Window ID">
          <Link to={`/maintenance/${k8sCluster.maintenance_window_id}`}>
            {k8sCluster.maintenance_window_id}
          </Link>
        </Descriptions.Item>
        <Descriptions.Item label="Control Plane Version">
          {k8sInfo.control_plane_version?.major}.
          {k8sInfo.control_plane_version?.minor}
        </Descriptions.Item>
        {k8sInfo.admin_nodes ? (
          <Descriptions.Item label="Admin Node Version">
            {k8sInfo.admin_nodes[0].version?.major}.
            {k8sInfo.admin_nodes[0].version?.minor}
          </Descriptions.Item>
        ) : (
          <Descriptions.Item label="Admin Node Version">-</Descriptions.Item>
        )}
        <Descriptions.Item label="O11yK8s Node Version">
          {formatO11yNodeVersion(o11yK8sNode?.version)}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  )
}