import React, { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import useStores from 'dbaas/stores/useStores'

import { IndexAdvisorPage } from './Page'
// import { getIndexAdvisorContext, IndexAdvisorProvider } from './utils/mock-api-context-provider'
import { getIndexAdvisorContext, IndexAdvisorProvider } from './utils/context-provider'

/////////////////////////////////////////

interface IndexAdvisorAppProps {
  cluster: SharedCluster
}

const IndexAdvisorApp: React.FC<React.PropsWithChildren<IndexAdvisorAppProps>> = ({ cluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Diagnosis - Index Advisor`
  }, [])
  const {
    store: {
      tenantData: { id: orgId },
      activeProjectId
    }
  } = useStores()

  return (
    <IndexAdvisorProvider
      ctxValue={getIndexAdvisorContext({
        orgId,
        projectId: activeProjectId,
        clusterId: cluster.id,
        clusterProvider: cluster.provider,
        clusterRegion: cluster.region,
        computed: cluster.computed
      })}
    >
      <IndexAdvisorPage />
    </IndexAdvisorProvider>
  )
}

// use React.memo to prevent re-rendering when the cluster is updating periodically
export default React.memo(IndexAdvisorApp, (prevProps, nextProps) => prevProps.cluster.id === nextProps.cluster.id)