import { Badge, Box, Breadcrumbs, Group } from '@tidbcloud/uikit'
import { startCase } from 'lodash-es'

import { HelpCenterCard } from '../HelpCenter/CenterCard'
import { HeaderText } from '../HelpCenter/CenterRoute'
import { useHelpCenterContext } from '../HelpCenter/context'

import { Chats } from './Chats/Chats'

const BASE_PATH = '/help'
export const CHATBOT_BASE_PATH = '/help/tibot'
const steps = [
  {
    path: BASE_PATH,
    title: startCase(BASE_PATH)
  },
  {
    path: CHATBOT_BASE_PATH,
    title: (
      <Group gap={8}>
        TiDB Bot
        <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
          Preview
        </Badge>
      </Group>
    )
  }
]

export const ChatbotEntry = () => {
  const { setCurrentPath } = useHelpCenterContext()

  return (
    <Box h="100%">
      <HelpCenterCard.Header>
        <Breadcrumbs
          styles={(theme) => ({
            separator: {
              marginLeft: 4,
              marginRight: 4,
              color: theme.colors.gray[7]
            }
          })}
        >
          {steps.map((t, index) => (
            <HeaderText
              key={t + index.toString()}
              active={index === steps.length - 1}
              onClick={() => {
                setCurrentPath(t.path)
              }}
            >
              {t.title}
            </HeaderText>
          ))}
        </Breadcrumbs>
      </HelpCenterCard.Header>

      <Chats />
    </Box>
  )
}