import { useSessionStorageState } from 'ahooks'
import { Card, Divider, Spin } from 'antd'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  useGetK8SInformation,
  useGetK8sUpgradeTaskCluster
} from 'apiClient/services/devops'

import { BasicInfo } from './BasicInfo'
import { ClusterList } from './Clusters'
import { CR } from './CR'

export default function K8sUpgradeTaskClusterDetail() {
  const params = new URLSearchParams(window.location.search)
  const task_status = params.get('task_status') || ''
  const cloud_provider = params.get('cloud_provider') || ''
  const region = params.get('region') || ''
  const [, setCloudProvider] = useSessionStorageState('cloud_provider', {
    defaultValue: cloud_provider
  })
  const [activeTabKey, setActiveTabKey] = useState<string>('clusterList')

  useEffect(() => {
    setCloudProvider(cloud_provider)
    return () => {
      setCloudProvider('')
    }
  }, [cloud_provider, setCloudProvider])

  const { task_id } = useParams<{ task_id: string }>()
  const { k8s_name } = useParams<{ k8s_name: string }>()
  const { data: k8sInfo } = useGetK8SInformation(
    cloud_provider,
    region,
    k8s_name,
    {}
  )
  const { data: k8sCluster } = useGetK8sUpgradeTaskCluster(
    task_id,
    k8s_name,
    {}
  )

  const k8sInfoPayload = k8sInfo?.data
  const k8sClusterRecord = k8sCluster?.data?.k8s_cluster

  if (!k8sInfo || !k8sCluster) {
    return <Spin style={{ display: 'block', margin: '48px auto' }} />
  }

  if (!k8sInfoPayload || !k8sClusterRecord) {
    return <Spin style={{ display: 'block', margin: '48px auto' }} />
  }

  const upgradeOperationStatus = k8sClusterRecord.upgrade_operation_status ?? ''
  const canEditUpgradeOperationCr =
    !k8sClusterRecord.is_excluded &&
    (task_status == 'pending' ||
      (task_status == 'running' &&
        (upgradeOperationStatus == '' || upgradeOperationStatus == 'Pending')))

  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }
  const tabList = [
    {
      key: 'clusterList',
      tab: 'TiDB Cluster List'
    },
    {
      key: 'upgradeOperationCR',
      tab: 'UpgradeOperationCR'
    }
  ]
  const contentList: Record<string, React.ReactNode> = {
    clusterList: <ClusterList k8sInfo={k8sInfoPayload} />,
    upgradeOperationCR: (
      <CR
        k8sCluster={k8sClusterRecord}
        k8sInfo={k8sInfoPayload}
        showEdit={canEditUpgradeOperationCr}
      />
    )
  }

  return (
    <>
      <BasicInfo k8sInfo={k8sInfoPayload} k8sCluster={k8sClusterRecord} />
      <Divider />
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </>
  )
}