import { useEffect } from 'react'
import { useParams } from 'react-router-dom'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ChangefeedDetail } from 'dbaas/screens/Changefeed/ChangefeedDetail'
import ChangefeedDetailEssential from 'dbaas/screens/Changefeed/ChangefeedDetailEssential'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

const ClusterChangefeedDetail = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Changefeed Detail`
  }, [])
  const { changefeedId } = useParams<{ changefeedId: string }>()

  if (cluster.computed.isEssential) {
    return <ChangefeedDetailEssential cluster={cluster} changefeedId={changefeedId} />
  }

  return (
    <ClusterPageShell
      title="Changefeed Detail"
      headerProps={{ withBack: true }}
      // headerProps={{
      //   rightSection: <ChangefeedDetailPageHeader id={changefeedId} />
      // }}
    >
      <ChangefeedDetail id={changefeedId} cluster={cluster} />
    </ClusterPageShell>
  )
}

export default ClusterChangefeedDetail