import React from 'react'

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

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

import { PlanDetailTabCopr } from '../../SQLRepository/Detail/PlanDetailTabCopr'
import { PlanDetailTabTime } from '../../SQLRepository/Detail/PlanDetailTabTime'
import { PlanDetailTabTxn } from '../../SQLRepository/Detail/PlanDetailTabTxn'
import { StatementV2Model } from '../types'
import { PlanDetailTabBasic } from './PlanDetailTabBasic'

interface PlanDetailTabsProps {
  data: StatementV2Model
  showRU: boolean
}

const tabs = ['Basic', 'Time', 'Coprocessor', 'Transaction'] as const

export const PlanDetailTabs: React.FC<PlanDetailTabsProps> = ({
  data,
  showRU
}) => (
  <Card shadow='none' p='xl'>
    <Tabs defaultValue={tabs[0]}>
      <Stack gap='md'>
        <Tabs.List>
          {tabs.map((tab) => (
            <Tabs.Tab
              key={tab}
              value={tab}
              onClick={() =>
                eventTracking('Statement V2 Detail Tab Clicked', {
                  value: tab
                })
              }
            >
              {tab}
            </Tabs.Tab>
          ))}
        </Tabs.List>

        <Tabs.Panel value='Basic'>
          <PlanDetailTabBasic data={data} showRU={showRU} />
        </Tabs.Panel>
        <Tabs.Panel value='Time'>
          <PlanDetailTabTime data={data} />
        </Tabs.Panel>
        <Tabs.Panel value='Coprocessor'>
          <PlanDetailTabCopr data={data} />
        </Tabs.Panel>
        <Tabs.Panel value='Transaction'>
          <PlanDetailTabTxn data={data} />
        </Tabs.Panel>
      </Stack>
    </Tabs>
  </Card>
)