import { Position } from '@elastic/charts'
import { notifier, SimpleGrid } from '@tidbcloud/uikit'
import { useRafInterval } from 'ahooks'
import { SyncChartPointer as MetricsChartSyncProvider } from 'metrics-chart'
import { useState } from 'react'

import ChartCard from 'dbaas/components/ChartCard'
import { CreationPendingOverlay } from 'dbaas/components/ChartCard/CreationPendingOverlay'
import { getNewTimeRange, INTERVAL_M_SEC, MetricRequestOptions } from 'dbaas/components/ChartCard/helpers'
import { HeroComponent } from 'dbaas/components/Measurement'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'

import { cassandraOverviewMetricsConfig, getOverviewMetricsConfig } from './config'

interface ChartPanelProps {
  metricsURL: string
  isLoadingMetricsURL: boolean
  metricRequestOptions?: MetricRequestOptions
  isTieredStorageEnabled: boolean
}

export const ChartPanel: React.FC<ChartPanelProps> = ({
  metricsURL,
  isLoadingMetricsURL,
  metricRequestOptions,
  isTieredStorageEnabled
}) => {
  const tidb = useSharedTiDBContext()
  const [fetched, setFetched] = useState(false)
  const metricsConfig = tidb.computed.isCassandra
    ? cassandraOverviewMetricsConfig
    : getOverviewMetricsConfig({
        isEssentialV2: tidb.computed.isEssentialV2,
        isPremiumReserved: tidb.computed.isPremiumReserved,
        isTieredStorageEnabled,
        minRcu: Number(tidb.minRcu || 0)
      })

  const [timeRange, setTimeRange] = useState<[number, number]>(() => getNewTimeRange())

  // useRafInterval stops running when browser render doesn't work, for example, browser tab is not active, browser window is minimized.
  useRafInterval(() => {
    setTimeRange(getNewTimeRange())
  }, INTERVAL_M_SEC)

  return (
    <MetricsChartSyncProvider>
      <SimpleGrid type="container" cols={{ base: 1, '640px': 2 }} spacing="xl">
        {metricsConfig.map((metric, index) => (
          <ChartCard
            key={`${metric.title}-${tidb?.tidbId}-${index}`}
            title={metric.title}
            label={metric.label}
            sourceURI={metricsURL}
            timeRange={timeRange}
            metric={metric}
            metricRequestOptions={metricRequestOptions}
            height={250}
            chartSetting={{ legendPosition: Position.Bottom, legendSize: 62 }}
            onLoading={(loading) => {
              if (!loading) {
                setFetched(true)
              }
            }}
            pendingOverlay={tidb?.computed.creating || tidb?.computed.restoring ? <CreationPendingOverlay /> : null}
            initialLoading={isLoadingMetricsURL}
            enableCircuitBreaker
            onThrottleOpen={() => {
              notifier.warn('Metrics service is temporarily unavailable. Please try again later.', { autoClose: 6000 })
            }}
          />
        ))}
        {fetched && <HeroComponent />}
      </SimpleGrid>
    </MetricsChartSyncProvider>
  )
}