import { Flex, Group, SegmentedControl, Typography } from '@tidbcloud/uikit'
import { IconBezierCurve02, IconFolder } from '@tidbcloud/uikit/icons'
import { ReactNode } from 'react'

interface MyTiDBViewToolbarProps {
  viewMode: 'list' | 'project'
  onSwitchView: (value: string) => void
  children?: ReactNode
  actions?: ReactNode
  toolbarTestId?: string
  filtersTestId?: string
  stickyContentGap?: number
}

export const MyTiDBViewToolbar = ({
  viewMode,
  onSwitchView,
  children,
  actions,
  toolbarTestId = 'my-tidb-toolbar',
  filtersTestId = 'my-tidb-filters',
  stickyContentGap = 0
}: MyTiDBViewToolbarProps) => {
  return (
    <Flex
      justify="space-between"
      align="center"
      data-testid={toolbarTestId}
      sx={{
        position: 'sticky',
        top: 'var(--app-page-shell-header-height)',
        zIndex: 8,
        backgroundColor: 'var(--mantine-color-carbon-0)',
        paddingBottom: stickyContentGap
      }}
    >
      <Flex gap={8} align="center" data-testid={filtersTestId}>
        <SegmentedControl
          value={viewMode}
          onChange={onSwitchView}
          data={[
            {
              value: 'list',
              label: (
                <Group gap={4} wrap="nowrap" justify="center">
                  <IconBezierCurve02 size={18} />
                  <Typography variant="label-lg">Resource View</Typography>
                </Group>
              )
            },
            {
              value: 'project',
              label: (
                <Group gap={4} wrap="nowrap" justify="center">
                  <IconFolder size={18} />
                  <Typography variant="label-lg">Project View</Typography>
                </Group>
              )
            }
          ]}
          data-testid="my-tidb-view-mode-toggle"
        />
        {children}
      </Flex>
      {actions ? <Group gap={8}>{actions}</Group> : null}
    </Flex>
  )
}

export default MyTiDBViewToolbar