import React from 'react'

import {
  MetricsChart,
  QueryConfig,
  TimeRangeValue,
  TransformNullValue,
  YAxisLogBase,
  YAxisScaleType
} from 'metrics-chart'

import { ClusterCluster } from '@clinic/client'
import { grafanaQueryRange } from '~/api'
import { OrgType } from '~/hooks/state'
import { replaceQuery } from '~/pages/reports/shared/utils/promql'

export const MetricChart = ({
  charts,
  cluster,
  range,
  orgId,
  isCloud
}: {
  orgId: string
  range: TimeRangeValue
  charts: ChartConfig[]
  cluster: ClusterCluster
  isCloud: boolean
}) => {
  return (
    <SingleOrMultiChart
      charts={charts}
      render={(chart) => {
        const queries = chart.queries.map((query) => ({
          ...query,
          promql: replaceQuery(
            query.promql,
            cluster.id!,
            OrgType.Cloud,
            cluster?.deployType,
            '.*',
            '.*',
            cluster?.keyspaceID
          )
        }))
        return (
          <div>
            <h4 className='mb-0 ml-6'>{chart.name}</h4>
            <MetricsChart
              unit={chart.unit}
              queries={queries}
              range={range}
              nullValue={TransformNullValue.AS_ZERO}
              yAxisScaleType={chart.yAxisScaleType}
              logBase={chart.logBase}
              fetchPromeData={({
                endTimeSec,
                query,
                startTimeSec,
                stepSec
              }) => {
                return grafanaQueryRange({
                  query,
                  orgId,
                  clusterId: cluster.id!,
                  start: startTimeSec,
                  end: endTimeSec,
                  step: stepSec.toString() + 's',
                  isCloud
                }).then((res) => res.data)
              }}
            />
          </div>
        )
      }}
    />
  )
}

export interface ChartConfig {
  name: string
  unit: string
  yAxisScaleType?: YAxisScaleType
  logBase?: YAxisLogBase
  // https://github.com/pingcap-inc/compute-engine/blob/master/jobs/metrics-snapshot/promql.yaml
  queries: QueryConfig[]
}

interface SingleOrMultiChartProps {
  charts: ChartConfig[]
  render: (chart: ChartConfig) => JSX.Element
}

const SingleOrMultiChart: React.FC<SingleOrMultiChartProps> = ({
  charts,
  render
}) => {
  if (charts.length === 1) {
    return render(charts[0])
  }

  return (
    <div className='flex flex-wrap'>
      {charts.map((chart) => (
        <div className='basis-1/2 p-2' key={chart.name}>
          {render(chart)}
        </div>
      ))}
    </div>
  )
}