import React, { useMemo, useState } from 'react'

import { Modal } from 'antd'
import useSWR from 'swr'

import { CommonTaskStatus } from '@clinic/client'
import { getClusterDataStatus, rebuildClusterData } from '~/api'
import LoadingSpin from '~/components/LoadingSpin'
import { useMutation } from '~/hooks/use-mutation'
import { clusterDetailTelemetry } from '~/telemetry'
import { formatDateTime } from '~/utils/date-time'

import { DetailItemCard } from '../components/DetailItemCard'
import { ItemModalProps, ItemType } from './types'

const SlowQueryModalBody: React.FC<ItemModalProps> = ({
  oid,
  cid,
  timeRange
}) => {
  const { start, end } = timeRange
  const itemType = ItemType.SlowQuery

  // invalidate the cache
  const now = useMemo(() => new Date().valueOf(), [])
  const {
    data: dataStatusRes,
    error,
    mutate
  } = useSWR(
    [`/orgs/${oid}/clusters/${cid}/data_status`, start, end, itemType, now],
    () => getClusterDataStatus(oid, cid, start, end, itemType)
  )
  const loading = !dataStatusRes && !error

  const { run: runRebuildClusterData } = useMutation(rebuildClusterData)

  // instance log & slow query log
  function handleDataItem(i: CommonTaskStatus) {
    if (i.status === -1) {
      Modal.confirm({
        title: 'Do you want to rebuild the data?',
        content: 'The data is cold, need to rebuild before ready',
        onOk: () => {
          runRebuildClusterData(
            {
              oid,
              cid,
              rebuild: { dataType: itemType, itemID: i.itemID }
            },
            function () {
              mutate()
            }
          )
        }
      })
    } else if (i.status === 0) {
      Modal.info({
        title: 'Data rebuild is queued',
        content: 'It may need several minutes to start rebuilding'
      })
      mutate()
    } else if (i.status === -2) {
      Modal.info({
        title: 'Rebuild failed or data expired',
        content: `Rebuild failed or data expired`
      })
      mutate()
    } else if (i.status! < 100) {
      Modal.info({
        title: 'The data is still rebuilding',
        content: `Please wait until the data is ready (process: ${i.status}%)`
      })
      mutate()
    } else {
      // i.status === 100
      // itemType === 3
      clusterDetailTelemetry.clickSlowQueriesItem(i.itemID!)
      window.open(
        window.location.pathname +
          `dashboard/op/?oid=${oid}&cid=${cid}&item_id=${i.itemID}#/slow_query?from=${start}&to=${end}`,
        '_blank'
      )
    }
  }

  if (loading) {
    return (
      <div className='text-center'>
        <LoadingSpin />
      </div>
    )
  }

  return (
    <div className='flex flex-col items-center'>
      {dataStatusRes?.data.items?.map((i) => (
        <a key={i.itemID} onClick={() => handleDataItem(i)}>
          {formatDateTime(i.startTime!)} - {formatDateTime(i.endTime!)}
        </a>
      ))}
    </div>
  )
}

export const SlowQueryModal: React.FC<ItemModalProps> = ({
  oid,
  cid,
  timeRange
}) => {
  const name = 'Slow Query'
  const [modalVisible, setModalVisible] = useState(false)
  return (
    <>
      <DetailItemCard
        name={name}
        onClick={() => {
          clusterDetailTelemetry.clickSlowQueryCard()
          setModalVisible(true)
        }}
      />

      <Modal
        visible={modalVisible}
        footer={null}
        onCancel={() => setModalVisible(false)}
        title={name}
        destroyOnClose={true}
      >
        <SlowQueryModalBody
          oid={oid}
          cid={cid}
          timeRange={timeRange}
          onClose={() => setModalVisible(false)}
        />
      </Modal>
    </>
  )
}