import { Button, Group, Stack } from '@tidbcloud/uikit'
import { useMemo, useState } from 'react'

import CustomTemplateList from './CustomTemplate'
import DefaultTemplateList from './DefaultTemplate/DefaultTemplateList'

type TemplateTab = 'default' | 'templates'

const TEMPLATE_TABS: Array<{ label: string; value: TemplateTab }> = [
  {
    label: 'System Templates',
    value: 'default'
  },
  {
    label: 'Custom Templates',
    value: 'templates'
  }
]

function ConfigTemplates() {
  const [activeTabKey, setActiveTabKey] = useState<TemplateTab>('default')

  const contentList = useMemo<Record<TemplateTab, React.ReactNode>>(
    () => ({
      default: <DefaultTemplateList />,
      templates: <CustomTemplateList />
    }),
    []
  )

  return (
    <Stack gap="md">
      <Group gap={4}>
        {TEMPLATE_TABS.map((tab) => {
          const active = activeTabKey === tab.value

          return (
            <Button
              key={tab.value}
              variant="subtle"
              size="sm"
              onClick={() => setActiveTabKey(tab.value)}
              style={{
                borderBottom: active
                  ? '2px solid var(--mantine-color-peacock-6, #0b6fcb)'
                  : '2px solid transparent',
                borderRadius: 0,
                color: active
                  ? 'var(--mantine-color-carbon-9, #1f2d3d)'
                  : 'var(--mantine-color-carbon-6, #5f6b7a)',
                fontWeight: active ? 600 : 400,
                paddingLeft: 12,
                paddingRight: 12
              }}
            >
              {tab.label}
            </Button>
          )
        })}
      </Group>

      {contentList[activeTabKey]}
    </Stack>
  )
}

export default ConfigTemplates