import {
  PromDataAccessor,
  PromQueryGroup,
  TimeSeriesChart
} from '@diag-ui/chart'
import { Card, Col, Row } from 'antd'
import React from 'react'
import { useParams } from 'react-router-dom'

import { devopsInstance } from 'apiClient/custom-instance'

import { defaultSchemas } from './promql_schema'

export interface GrafanaQueryRangeParams {
  query: string
  start: number
  end: number
  step: number
}

export function grafanaQueryRange({
  query,
  start,
  end,
  step
}: GrafanaQueryRangeParams) {
  return devopsInstance<any>({
    url: `/api/v1/devops/tenants/metrics/query_range?query=${query}&start=${start}&end=${end}&step=${step}`,
    method: 'get',
    headers: { 'Content-Type': 'application/json' }
  })
}

export const replaceQuery = (query: string, tenantId: string) => {
  let q: string
  q = query.replaceAll('{label_tenant_id}', `tenant=~".*${tenantId}"`)

  return q.replaceAll('+', encodeURIComponent('+'))
}

export const TechnicalInfo: React.FC<React.PropsWithChildren<unknown>> = () => {
  const { org_id } = useParams<{ org_id: string }>()
  const end = Math.floor(Date.now() / 1000)
  const start = end - 60 * 60 * 24 * 30 * 3 // last 90 days
  return (
    <>
      <PromDataAccessor
        fetch={(query, tp) =>
          grafanaQueryRange({
            query: replaceQuery(query, org_id),
            start: tp.start_time,
            end: tp.end_time,
            step: 604800 // 7 days
          }).then((res) => res.data)
        }
        //   onBatchLoadingChange={setIsLoading}
        params={{ start_time: start, end_time: end }}
      >
        <Row gutter={[16, 16]}>
          {defaultSchemas.map((metrics, _) => (
            <Col span={24}>
              <Card title={metrics.title}>
                <TimeSeriesChart nullValue={metrics.nullValue} height={300}>
                  <PromQueryGroup
                    queries={metrics.queries}
                    unit={metrics.unit}
                  />
                </TimeSeriesChart>
              </Card>
            </Col>
          ))}
        </Row>
      </PromDataAccessor>
    </>
  )
}