import { Card, Alert } from 'antd'
import { useState } from 'react'
import { useParams } from 'react-router-dom'

import { AuditControllerListAuditLogType } from 'apiClient/services/devops/interface'
import AuditTable from 'components/Audit'

import Terminal from './terminal'

const TerminalBasic = ({ deploy_type }: { deploy_type: string }) => {
  const [activeTabKey, setActiveTabKey] = useState<string>('ctl')
  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }
  const tabList = [
    {
      key: 'ctl',
      tab: 'Terminal'
    },
    {
      key: 'audit',
      tab: 'Audit Logs'
    }
  ]

  const { cluster_id } = useParams<{ cluster_id: string }>()

  const contentList: Record<string, React.ReactNode> = {
    ctl: (
      <>
        <Alert
          type="error"
          message="Warning"
          description={
            <>
              This terminal is intended for executing temporary command.
              Configuration changes made through it are not persistent and may
              be overwritten.
              <br />
              Please refer to{' '}
              <a href="https://pingcap.feishu.cn/wiki/W6paw5oAoipQ96kP38Qc7QUJnYe">
                this document
              </a>{' '}
              to modify the configuration of PD and other components.
            </>
          }
          style={{ marginBottom: 16 }}
        />
        <Terminal cluster_id={cluster_id} deploy_type={deploy_type} />
      </>
    ),
    audit: (
      <AuditTable
        type={AuditControllerListAuditLogType.ctl}
        id={cluster_id}
      ></AuditTable>
    )
  }
  return (
    <>
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </>
  )
}

export default TerminalBasic