import { Card, Typography } from 'antd'
import React, { useState } from 'react'
import { useLocation, useParams } from 'react-router-dom'

import { useGetProject } from '../../../apiClient/services/devops'

import { BasicInfo } from './BasicInfo'
import ProjectCIDR from './NetworkAccess/Cidr'
import OperationHistory from './OperationHistory'
const { Title } = Typography

export default function ProjectDetail() {
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)
  var prev = searchParams.get('activeKey')
  const [activeTabKey, setActiveTabKey] = useState<string>(
    prev || 'project_cidr'
  )
  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }

  const { org_id, project_id } = useParams<{
    org_id: string
    project_id: string
  }>()
  const { data, refetch } = useGetProject(org_id, project_id)
  if (!data) {
    return <></>
  }

  const tabList = [
    {
      key: 'project_cidr',
      tab: 'Project CIDR'
    }
  ]
  const contentList: Record<string, React.ReactNode> = {
    project_cidr: <ProjectCIDR />
  }

  return (
    <>
      <BasicInfo project={data?.data.project!}></BasicInfo>
      <Card
        title={<Title level={5}>Network Access</Title>}
        bordered={false}
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
      <OperationHistory />
    </>
  )
}