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

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

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

export default function InfraInfoDetail() {
  const params = new URLSearchParams(window.location.search)
  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 { k8s_name } = useParams<{ k8s_name: string }>()
  const { data } = useGetK8SInformation(cloud_provider, region, k8s_name, {})
  if (!data) {
    return null
  }

  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }
  const tabList = [
    {
      key: 'clusterList',
      tab: 'TiDB Cluster List'
    }
    // {
    //   key: 'upgradeInfo',
    //   tab: 'Upgrade History'
    // }
  ]
  const contentList: Record<string, React.ReactNode> = {
    clusterList: <ClusterList k8s={data.data} />
    // upgradeInfo: <Operations org_id={org_id} />,
  }

  return (
    <>
      <BasicInfo k8s={data.data} />
      <Divider />
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </>
  )
}