import { HoverCard, Typography } from '@tidbcloud/uikit'
import { useCallback, useState } from 'react'

/**
 * Container width 200px with 1px right border
 * padding left/right 18px
 */
const HEADER_CONTENT_MAX_WIDTH = 163

interface NavbarHeaderProps {
  label: string
}

const NavbarHeader = ({ label = '' }: React.PropsWithChildren<NavbarHeaderProps>) => {
  const [overflowed, setOverflowed] = useState(false)

  const ref = useCallback(
    (node: HTMLSpanElement) => {
      if (node !== null && !!label) {
        const { width } = node.getBoundingClientRect()

        setOverflowed(width > HEADER_CONTENT_MAX_WIDTH)
      }
    },
    [label]
  )

  return (
    <HoverCard position="right" shadow="md" disabled={!overflowed}>
      <HoverCard.Target>
        <Typography
          variant="title-lg"
          px={18}
          py="md"
          sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
        >
          <span ref={ref}>{label}</span>
        </Typography>
      </HoverCard.Target>
      <HoverCard.Dropdown mt={4} maw={320}>
        <Typography variant="body-lg" sx={{ wordBreak: 'break-word' }}>
          {label}
        </Typography>
      </HoverCard.Dropdown>
    </HoverCard>
  )
}

export default NavbarHeader