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

import config from 'config'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { TiDBPageShell } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/TiDBPageShell'
import { eventTracking } from 'dbaas/utils/tracking'

import RulesList from './RulesList'

const AlertsList: React.FC<React.PropsWithChildren<unknown>> = () => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Alert Rules`
  }, [])
  const history = useHistory()
  const location = useLocation<{ historyBack?: boolean }>()
  const tidb = useSharedTiDBContext()
  return (
    <TiDBPageShell
      title="Edit Rules"
      headerProps={{
        withBack: true,
        onBackClick() {
          if (!!location.state?.historyBack) {
            history.goBack()
          } else {
            history.replace(`/tidbs/${tidb.tidbId}/alerts`)
          }
          eventTracking('Alert Rules Back Button Clicked')
        }
      }}
    >
      <RulesList />
    </TiDBPageShell>
  )
}

export default AlertsList