import { useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'
import { eventTracking } from 'dbaas/utils/tracking'

import RulesList from './RulesList'

const AlertsList = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Alert Rules`
  }, [])
  const history = useHistory()
  const location = useLocation<{ historyBack?: boolean }>()
  return (
    <ClusterPageShell
      title="Edit Rules"
      headerProps={{
        withBack: true,
        onBackClick() {
          if (!!location.state?.historyBack) {
            history.goBack()
          } else {
            history.replace(`/clusters/${cluster.id}/alerts`)
          }
          eventTracking('Alert Rules Back Button Clicked')
        }
      }}
    >
      <RulesList />
    </ClusterPageShell>
  )
}

export default AlertsList