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

import { OperationOperationTarget } from 'apiClient/services/devops/interface'

import Operations from '../../../Devops/Operations/Operations'

export default function OperationHistory() {
  const { org_id, project_id } = useParams<{
    org_id: string
    project_id: string
  }>()

  const [activeTabKey, setActiveTabKey] = useState<string>('operations')
  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }

  const tabList = [
    {
      key: 'operations',
      tab: 'Operation History'
    }
  ]
  const contentList: Record<string, React.ReactNode> = {
    operations: (
      <Operations
        target_type={OperationOperationTarget.project}
        target_id={project_id}
      />
    )
  }

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