import { Box, useMantineTheme } from '@tidbcloud/uikit'
import { useMount } from 'ahooks'
import { useLocation } from 'react-router-dom'

export interface SkipContentProps {
  name: string
}

export const SkipContent = ({ name }: SkipContentProps) => {
  const theme = useMantineTheme()
  return (
    <Box
      sx={{
        position: 'fixed',
        zIndex: 200,
        display: 'inline-block',
        backgroundColor: theme.colors.peacock[8],
        color: `${theme.white} !important`,
        padding: '10px 20px',
        fontSize: 16,
        transform: 'translateY(0)',
        '&:hover': {
          color: `${theme.white} !important`
        },
        '&:not(:focus)': {
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          height: 0,
          top: 0,
          transform: 'translateY(-100%)'
        }
      }}
      component={'a'}
      href={`#${name}`}
    >
      Skip to content
    </Box>
  )
}

export const useScorllToHash = (name: string) => {
  const { hash } = useLocation()
  useMount(() => {
    if (hash && hash === `#${name}`) {
      const element = document.querySelector(hash)
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
    }
  })
}