import { useEffect } from 'react'

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

import { SpendinglimitEdit } from './Edit'

export const ClusterSpendLimitEditHome = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Update Spending Limit`
  }, [])

  return (
    <PageAccessGuard
      id="TidbxSpendLimitAction"
      scopeProps={{ tidbId: cluster.id }}
      fallback={(defaultFallback) => (
        <ClusterPageShell title="Update Spending Limit" headerProps={{ withBack: true, p: 0 }} bodyProps={{ p: 0 }}>
          {defaultFallback}
        </ClusterPageShell>
      )}
    >
      <SpendinglimitEdit cluster={cluster} />
    </PageAccessGuard>
  )
}