import { ReloadOutlined } from '@ant-design/icons'
import { Badge, Button, Card, Descriptions, Divider, Modal, Space } from 'antd'
import Title from 'antd/lib/typography/Title'
import { useEffect, useState } from 'react'
import { useLocation, useParams, useHistory } from 'react-router-dom'

import {
  o11yControllerGetCluster,
  o11yControllerDeleteCluster
} from 'apiClient/services/devops'
import { O11yCluster } from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'

export default function ByocClusterDetail() {
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)
  const history = useHistory()

  const { org_id } = useParams<{ org_id: string }>()
  const { cluster_id } = useParams<{ cluster_id: string }>()
  const vendor = searchParams.get('vendor')
  const region = searchParams.get('region')

  const [clusterInfo, setClusterInfo] = useState<O11yCluster>()
  const [reload, setReload] = useState(false)
  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false)

  async function fetch() {
    const data = (
      await o11yControllerGetCluster(cluster_id, {
        orgID: org_id,
        vendor: vendor!,
        region: region!
      })
    ).data.data
    setClusterInfo(data)
  }

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

  const handleDelete = async () => {
    try {
      await o11yControllerDeleteCluster(cluster_id, {
        orgID: org_id,
        vendor: vendor!,
        region: region!
      }).then(() => {
        setDeleteModalOpen(false)
        setReload((pre) => !pre)
      })
      Modal.success({
        title: 'Info',
        content: (
          <div>
            <p>{`Cluster ${cluster_id} has been deleted.`}</p>
          </div>
        ),
        onOk() {
          history.push(`/orgs/${org_id}`)
        }
      })
    } catch (error) {
      Modal.error({
        title: error.response.data.errcode,
        content: error.response.data.errmsg
      })
    }
  }

  const DeleteModalFormField = () => {
    return (
      <>
        <span style={{ fontSize: 'larger' }}>Sure to delete this cluster?</span>
      </>
    )
  }

  return (
    <>
      <div>
        <Card
          title={<Title level={4}>{`Byoc Cluster Detail`}</Title>}
          extra={
            <Space>
              <Button
                danger
                onClick={() => {
                  setDeleteModalOpen(true)
                }}
              >
                Delete
              </Button>
              &nbsp;
              <Button
                onClick={() => {
                  setReload((pre) => !pre)
                }}
                icon={<ReloadOutlined />}
              ></Button>
            </Space>
          }
        >
          <Title level={5}>Basic Information</Title>
          <Descriptions column={3}>
            <Descriptions.Item label="ID">{clusterInfo?.id}</Descriptions.Item>
            <Descriptions.Item label="Project ID">
              {clusterInfo?.projectID}
            </Descriptions.Item>
            <Descriptions.Item label="Tenant ID">
              {clusterInfo?.tenantID}
            </Descriptions.Item>
            <Descriptions.Item label="Application ID">
              {clusterInfo?.applicationID}
            </Descriptions.Item>
            <Descriptions.Item label="Vendor">
              {clusterInfo?.vendor}
            </Descriptions.Item>
            <Descriptions.Item label="Region">
              {clusterInfo?.region}
            </Descriptions.Item>
            <Descriptions.Item label="Status">
              {clusterInfo?.status}
            </Descriptions.Item>
            <Descriptions.Item label="DNS Name" span={2}>
              {clusterInfo?.dnsName}
            </Descriptions.Item>
            <Descriptions.Item label="Agent Role ARN" span={3}>
              {clusterInfo?.agentRoleARN}
            </Descriptions.Item>
            <Descriptions.Item label="Endpoint Service Name" span={3}>
              {clusterInfo?.endpointServiceName}
            </Descriptions.Item>
            <Descriptions.Item label="Tags">
              {clusterInfo?.tags}
            </Descriptions.Item>
            <Descriptions.Item label="Note">
              {clusterInfo?.note}
            </Descriptions.Item>
          </Descriptions>

          {clusterInfo?.metrics && (
            <div>
              <Divider />
              <Title level={5}>Logs</Title>
              <Descriptions>
                <Descriptions.Item label="Status">
                  {clusterInfo?.logs?.status}
                </Descriptions.Item>
                <Descriptions.Item label="Data Retention">
                  {clusterInfo?.logs?.dataRetention}
                </Descriptions.Item>
              </Descriptions>
            </div>
          )}

          {clusterInfo?.metrics && (
            <div>
              <Divider />
              <Title level={5}>Metrics</Title>
              <Descriptions>
                <Descriptions.Item label="Status">
                  {clusterInfo?.metrics?.status}
                </Descriptions.Item>
                <Descriptions.Item label="Data Retention" span={2}>
                  {clusterInfo?.metrics?.dataRetention}
                </Descriptions.Item>
                <Descriptions.Item label="Query Endpoint" span={5}>
                  {clusterInfo?.metrics?.queryEndpoint}
                </Descriptions.Item>
              </Descriptions>
            </div>
          )}

          {clusterInfo?.alert && (
            <div>
              <Divider />
              <Title level={5}>Alert</Title>
              <Descriptions>
                <Descriptions.Item label="Status">
                  {clusterInfo?.alert?.status}
                </Descriptions.Item>
                <Descriptions.Item label="Rule Template">
                  {clusterInfo?.alert?.ruleTemplate}
                </Descriptions.Item>
              </Descriptions>
            </div>
          )}
        </Card>

        <ModalForm
          visible={!!deleteModalOpen}
          name="Delete Cluster"
          title={'Delete Authorization'}
          width={380}
          getFields={() => {
            return <DeleteModalFormField />
          }}
          okText={'Confirm'}
          onSubmit={handleDelete}
          onCancel={() => {
            setDeleteModalOpen(false)
          }}
        />
      </div>
    </>
  )
}