import React from 'react'

import Button from '../button'
import { styled, useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useHeaderContext } from './context'
import { HeaderNotificationsProps } from './header.types'

/*@formatter:off*/
const Badge = styled.spanBox`
  align-items: center;
  background-color: energyRed.45;
  border-radius: round;
  color: white;
  display: flex;
  font-size: 12px;
  font-weight: medium;
  height: 20px;
  justify-content: center;
  position: absolute;
  right: 1px;
  top: 1px;
  min-width: 20px;
`
/*@formatter:on*/

/** Icon link to Veracity notifications engine with an optional number of new notifications. */
export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, ref) => {
  const { children, className, count = 0, url, ...rest } = props
  const { links } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext()).notifications

  return (
    <Button
      as="a"
      className={cs('vui-headerNotifications', className)}
      href={url ?? links.notifications}
      minW={0}
      position="relative"
      px="9px"
      ref={ref}
      size="lg"
      title="Notifications"
      variant="tertiaryDark"
      {...styles.container}
      {...rest}
    >
      {children ?? (
        <>
          <Button.Icon name="falBell" />
          {count > 0 && (
            <Badge px={count < 9 ? '0' : '4px'} right={count < 9 ? 1 : 0}>
              {count < 100 ? count : '99+'}
            </Badge>
          )}
        </>
      )}
    </Button>
  )
})

HeaderNotifications.displayName = 'HeaderNotifications'

export default HeaderNotifications
