import {
  Breadcrumbs,
  BreadcrumbsProps,
  ElementProps,
  Typography,
  TypographyProps,
  useMantineTheme
} from '@tidbcloud/uikit'
import { mergeStylesList } from '@tidbcloud/uikit/utils'
import React, { ReactElement, useLayoutEffect } from 'react'
import { matchPath } from 'react-router-dom'

import { useHelpCenterContext } from './context'

export const CenterSwitch: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
  const { currentPath } = useHelpCenterContext()

  let element: ReactElement | null = null
  let match: object | null = null

  // see https://github.com/remix-run/react-router/blob/v5/packages/react-router/modules/Switch.js#L27
  React.Children.forEach(children, (child) => {
    if (match == null && React.isValidElement(child)) {
      element = child

      const path = child.props.path

      match = matchPath(currentPath, { ...child.props, path })
    }
  })

  return match && element ? React.cloneElement(element) : null
}

export const CenterRoute: React.FC<React.PropsWithChildren<{ path: string; exact?: boolean }>> = ({
  children,
  path,
  exact
}) => {
  const { currentPath } = useHelpCenterContext()
  if (
    matchPath(currentPath, {
      path,
      exact
    })
  ) {
    return <>{children}</>
  }
  return null
}

export const CenterRedirect: React.FC<React.PropsWithChildren<{ path: string; to: string; exact?: boolean }>> = ({
  path,
  to,
  exact
}) => {
  const { setCurrentPath, currentPath } = useHelpCenterContext()

  useLayoutEffect(() => {
    if (matchPath(currentPath, { path, exact })) {
      setCurrentPath(to)
    }
  }, [to, setCurrentPath, path, exact, currentPath])

  return null
}

export interface HeaderTextProps extends TypographyProps, ElementProps<'div', 'color'> {
  active?: boolean
}

export const HeaderText: React.FC<React.PropsWithChildren<HeaderTextProps>> = ({ children, active, ...rest }) => {
  const theme = useMantineTheme()
  const color = theme.colors.gray[7]
  return (
    <Typography
      sx={{
        color,
        cursor: active ? 'default' : 'pointer',
        ':hover': {
          color: active ? color : theme.colors.peacock[5]
        }
      }}
      {...rest}
    >
      {children}
    </Typography>
  )
}

export interface CenterBreadcrumbItem {
  path: string
  title: string
}

export interface CenterBreadcrumbsProps extends Omit<BreadcrumbsProps, 'children'> {
  items: CenterBreadcrumbItem[]
}

export const CenterBreadcrumbs: React.FC<React.PropsWithChildren<CenterBreadcrumbsProps>> = ({ items, ...rest }) => {
  const { currentPath, setCurrentPath } = useHelpCenterContext()
  return (
    <Breadcrumbs
      {...rest}
      styles={mergeStylesList([
        (theme) => ({
          separator: {
            marginLeft: 4,
            marginRight: 4,
            color: theme.colors.gray[7]
          }
        }),
        rest.styles
      ])}
    >
      {items.map((item, index) => {
        return (
          <HeaderText
            key={item.path + index.toString()}
            active={!!matchPath(currentPath, { path: item.path, exact: true })}
            onClick={() => {
              setCurrentPath(item.path)
            }}
          >
            {item.title}
          </HeaderText>
        )
      })}
    </Breadcrumbs>
  )
}