import React, { useMemo } from 'react'

import { Card, Group } from '@mantine/core'
import dayjs from 'dayjs'
import { useParams } from 'react-router-dom'
import useSWR from 'swr'

import { getClusterMetricsOverview, getMetricDashboards } from '~/api'
import { useCurCluster, useCurOrg, useUserStore } from '~/hooks/state'

import { metricItems } from './metric-items'
import { MetricOverview } from './MetricOverview'

export const MetricsOverview: React.FC = () => {
  const { orgId, cid } = useParams<'orgId' | 'cid'>()
  const { curOrg } = useCurOrg()
  const { curCluster } = useCurCluster()
  const isInternalUser = useUserStore((state) => state.user?.internal)
  const { data: metricsRes } = useSWR(
    `/orgs/${orgId}/clusters/${cid}/metrics`,
    () => getClusterMetricsOverview(orgId!, cid!)
  )
  const metricsData = metricsRes?.data

  const now = useMemo(() => dayjs().unix(), [])
  const { data: metricsDashboardRes } = useSWR(
    [`/orgs/${orgId}/clusters/${cid}/dashboard`, now],
    () => getMetricDashboards(orgId!, cid!, now - 60 * 60, now)
  )
  const metricsDashboard = metricsDashboardRes?.data

  const finalMetricItems = useMemo(() => {
    return metricItems.map((m) =>
      m.converter(
        m.base,
        metricsData,
        metricsDashboard,
        isInternalUser,
        curOrg,
        curCluster
      )
    )
  }, [metricsData, metricsDashboard, isInternalUser, curOrg, curCluster])

  return (
    <Card withBorder>
      <Group position='apart'>
        {finalMetricItems.map(
          (m) => m.visible && <MetricOverview key={m.title} {...m} />
        )}
      </Group>
    </Card>
  )
}