import { Tabs } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { useAccessCheck } from 'dbaas/contexts/access-control'
import { AccessDeniedView } from 'dbaas/contexts/access-control/ui/AccessDeniedView'

import { TiDBPageShell } from '../../tidb-mgmt-container/shared/TiDBPageShell'

import BYOCOpsAuditLog from './BYOCOpsAuditLog'
import { VCPUManagement } from './VCPUManagement'

const BYOC_CONFIG_TABS = {
  VCPU_MANAGEMENT: 'vpcu-management',
  OPS_AUDIT_LOGS: 'ops-audit-logs'
} as const

export const BYOCConfigurations = observer(() => {
  const vcpuManagementAccessible = useAccessCheck('ByocVCPUManagementGate')
  const opsAuditLogAccessible = useAccessCheck('OrgAuditGate')
  const hasAccessibleTab = vcpuManagementAccessible || opsAuditLogAccessible
  const defaultTab = vcpuManagementAccessible ? BYOC_CONFIG_TABS.VCPU_MANAGEMENT : BYOC_CONFIG_TABS.OPS_AUDIT_LOGS

  return (
    <TiDBPageShell title="BYOC Configurations">
      {hasAccessibleTab ? (
        <Tabs defaultValue={defaultTab}>
          <Tabs.List>
            {vcpuManagementAccessible && <Tabs.Tab value={BYOC_CONFIG_TABS.VCPU_MANAGEMENT}>vCPU Management</Tabs.Tab>}
            {opsAuditLogAccessible && (
              <Tabs.Tab value={BYOC_CONFIG_TABS.OPS_AUDIT_LOGS}>OPS Audit Logs Settings</Tabs.Tab>
            )}
          </Tabs.List>

          {vcpuManagementAccessible && (
            <Tabs.Panel value={BYOC_CONFIG_TABS.VCPU_MANAGEMENT} pt="md">
              <VCPUManagement />
            </Tabs.Panel>
          )}
          {opsAuditLogAccessible && (
            <Tabs.Panel value={BYOC_CONFIG_TABS.OPS_AUDIT_LOGS} pt="md">
              <BYOCOpsAuditLog />
            </Tabs.Panel>
          )}
        </Tabs>
      ) : (
        <AccessDeniedView />
      )}
    </TiDBPageShell>
  )
})

export default BYOCConfigurations