import { useHistory } from 'react-router-dom'

import { StatementDetail } from 'dbaas/screens/ClusterV2/features/Diagnosis/Statement/Detail'
import {
  StatementProvider,
  useStatementContext
} from 'dbaas/screens/ClusterV2/features/Diagnosis/Statement/utils/context'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { TiDBPageShell } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/TiDBPageShell'
import { getNextGenBizType, useGetO11YHost } from 'dbaas/services/useO11YQuery'
import useStores from 'dbaas/stores/useStores'
import { isCookieAuthEnabled } from 'dbaas/utils/o11y-auth'
import { eventTracking } from 'dbaas/utils/tracking'

import { getStatementContext } from '../premium-context-impl'

const StatementDetailContent: React.FC = () => {
  const ctx = useStatementContext()
  return (
    <TiDBPageShell
      title="SQL Statement Detail"
      headerProps={{
        withBack: true,
        onBackClick() {
          ctx.event.backFromDetail()
          eventTracking('SQL Statement Detail Back Button Clicked')
        }
      }}
    >
      <StatementDetail hero />
    </TiDBPageShell>
  )
}

const StatementDetailPage: React.FC = () => {
  const {
    store: {
      tenantData: { id: orgId }
    }
  } = useStores()
  const cookieEnabled = isCookieAuthEnabled()
  const history = useHistory()
  const tidb = useSharedTiDBContext()
  const { data, isLoading } = useGetO11YHost(orgId, tidb)
  // use slow query host as statement host for now, will migrate to new host later
  const o11yHost = data?.data?.slowQuery?.openReadUri

  const contextOptions = cookieEnabled
    ? {
        cookieEnabled: true,
        headerInput: {
          regionId: tidb.regionId,
          bizType: getNextGenBizType(tidb),
          orgId,
          clusterId: tidb.tidbId!
        }
      }
    : undefined

  return (
    <StatementProvider value={getStatementContext(tidb, history, o11yHost!, contextOptions)}>
      {!isLoading && <StatementDetailContent />}
    </StatementProvider>
  )
}

export default StatementDetailPage