import React, { useMemo } from 'react'

import { Stack, Tabs } from '@tidbcloud/uikit'

import { eventTracking } from '~/utils/telemetry'

import { StatementModel } from '../utils/type'
import { ExecutionPlan } from './ExecutionPlan'
import { PlanDetailTabBasic } from './PlanDetailTabBasic'
import { PlanDetailTabCopr } from './PlanDetailTabCopr'
import { PlanDetailTabTime } from './PlanDetailTabTime'
import { PlanDetailTabTxn } from './PlanDetailTabTxn'

enum INFO_TABS {
  Text = 'Execution Plan',
  Basic = 'Basic',
  Time = 'Time',
  Copr = 'Coprocessor',
  Txn = 'Transaction'
}
const _INFO_TAB_VALUES = [
  INFO_TABS.Basic,
  INFO_TABS.Time,
  INFO_TABS.Copr,
  INFO_TABS.Txn
]
const INFO_TABLES = {
  [INFO_TABS.Text]: (d: StatementModel) => <ExecutionPlan plan={d} />,
  [INFO_TABS.Basic]: (d: StatementModel) => <PlanDetailTabBasic data={d} />,
  [INFO_TABS.Time]: (d: StatementModel) => <PlanDetailTabTime data={d} />,
  [INFO_TABS.Copr]: (d: StatementModel) => <PlanDetailTabCopr data={d} />,
  [INFO_TABS.Txn]: (d: StatementModel) => <PlanDetailTabTxn data={d} />
}

export const PlanDetailTabs: React.FC<
  React.PropsWithChildren<{ data: StatementModel }>
> = ({ data }) => {
  const INFO_TAB_VALUES = useMemo(() => {
    if (data.binary_plan_text || data.plan) {
      return [INFO_TABS.Text, ..._INFO_TAB_VALUES]
    }
    return _INFO_TAB_VALUES
  }, [data])

  return (
    <Stack gap='xs'>
      <Tabs defaultValue={INFO_TAB_VALUES[0]}>
        <Stack gap='md'>
          <Tabs.List>
            {INFO_TAB_VALUES.map((t) => (
              <Tabs.Tab
                key={t}
                value={t}
                onClick={() =>
                  eventTracking('SQL Repository Plan Detail Tab Clicked', {
                    value: t
                  })
                }
              >
                {t}
              </Tabs.Tab>
            ))}
          </Tabs.List>

          {INFO_TAB_VALUES.map((t) => (
            <Tabs.Panel key={t} value={t}>
              {INFO_TABLES[t](data)}
            </Tabs.Panel>
          ))}
        </Stack>
      </Tabs>
    </Stack>
  )
}