import { Box, Card, CardProps, Flex, Group, Typography, useComputedColorScheme } from '@tidbcloud/uikit'
import { IconAiExplore01, IconAiMessage, IconChevronRight, IconDataService } from '@tidbcloud/uikit/icons'

import { eventTracking } from 'dbaas/utils/tracking'
import NextJsDark01 from 'media/NextJsDark01.svg?react'
import NextJsLight01 from 'media/NextJsLight01.svg?react'

const Item = ({
  title,
  desc,
  icon,
  lastBorder,
  topBorder,
  link,
  mpEvent
}: {
  title: string
  desc: string
  icon: React.ReactNode
  lastBorder?: boolean
  topBorder?: boolean
  link?: string
  mpEvent?: string
}) => {
  return (
    <Box>
      <Flex
        p={8}
        pl={16}
        my={8}
        align="center"
        onClick={() => {
          window.open(link)
          mpEvent && eventTracking(mpEvent)
        }}
        data-mp-event={mpEvent}
        sx={(t) => ({
          cursor: 'pointer',
          '&:hover': { backgroundColor: t.colors.carbon[3] },
          borderRadius: '4px'
        })}
      >
        <Box mr={24}>{icon ?? <IconAiExplore01 size={20} />}</Box>
        <Box>
          <Typography variant="body-lg">{title}</Typography>
          <Typography variant="body-lg" c="carbon.7">
            {desc}
          </Typography>
        </Box>
        <Box mx={14}>
          <IconChevronRight size={20} />
        </Box>
      </Flex>
      <Box
        mx={16}
        sx={(t) => ({
          borderBottom: lastBorder ? `1px solid ${t.colors.carbon[3]}` : 'none',
          borderTop: topBorder ? `1px solid ${t.colors.carbon[3]}` : 'none'
        })}
      ></Box>
    </Box>
  )
}

export const CodeExamplesBasePanel: React.FC<React.PropsWithChildren<CardProps>> = ({ children, ...rootProps }) => {
  const colorScheme = useComputedColorScheme()
  return (
    <Card p="xs" {...rootProps}>
      <Group mb={16} p={16} pb={0}>
        <Typography variant="headline-sm">Code Examples</Typography>
      </Group>
      <Box>
        <Item
          icon={<IconAiExplore01 size={20} />}
          title="AI-Powered Vector Search"
          link="https://github.com/tidbcloud/examples-projects/tree/main/examples/with-vector-search"
          desc="Upload text or images and discover similar data with advanced vector search"
          mpEvent="Code Example Vector Search Clicked"
        />
        <Item
          icon={
            colorScheme === 'dark' ? <NextJsDark01 width="20" height="20" /> : <NextJsLight01 width="20" height="20" />
          }
          title="Next.js To-Do App"
          link="https://github.com/tidbcloud/examples-projects/tree/main/examples/with-nextjs-todo"
          desc="Build and deploy a To-Do app with Next.js, powered by TiDB"
          mpEvent="Code Example Next.js To-Do App Clicked"
          lastBorder={false}
        />
        {children}
      </Box>
    </Card>
  )
}

export const CodeExamplesPanel = ({ ...rootProps }: Omit<CardProps, 'children'>) => {
  return (
    <CodeExamplesBasePanel {...rootProps}>
      <Item
        icon={<IconDataService size={20} />}
        title="Data API Example"
        link="https://github.com/tidbcloud/examples-projects/tree/main/examples/with-data-api"
        desc="TiDB's Data API for effortless app integrations and data operations"
        mpEvent="Code Example Data API Clicked"
        topBorder={true}
      />
      <Item
        icon={<IconAiMessage size={20} />}
        title="Natural Language Query Integration"
        link="https://github.com/tidbcloud/examples-projects/tree/main/examples/with-chat2query-api"
        desc="Query TiDB databases in natural language with Chat2Query API"
        mpEvent="Code Example Chat2Query Clicked"
        lastBorder={false}
      />
    </CodeExamplesBasePanel>
  )
}