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

import { eventTracking } from 'dbaas/utils/tracking'

import { StatementModel } from '../utils/type'

import { PlanDetailTabBasic } from './PlanDetailTabBasic'
import { PlanDetailTabCopr } from './PlanDetailTabCopr'
import { PlanDetailTabTime } from './PlanDetailTabTime'
import { PlanDetailTabTxn } from './PlanDetailTabTxn'

enum INFO_TABS {
  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.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 }) => {
  return (
    <Card shadow="none" p="xl">
      <Stack gap="xs">
        {/* <Title order={5}>Plan Detail</Title> */}

        <Tabs defaultValue={INFO_TAB_VALUES[0]}>
          <Stack gap="md">
            <Tabs.List>
              {INFO_TAB_VALUES.map((t) => (
                <Tabs.Tab
                  key={t}
                  value={t}
                  onClick={() => eventTracking('Statement Detail 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>
    </Card>
  )
}