import React, { forwardRef } from 'react'
import { Icon, IconButton, IconButtonProps } from '@chakra-ui/react'
import { HiBell } from 'react-icons/hi'
import { UnreadBadge } from './unread-badge'

export interface NotificationsTriggerTheme {
  color?: string
  bg?: string
  activeColor?: string
  activeBg?: string
  hoverColor?: string
  hoverBg?: string
}

export const defaultNotificationsTriggerTheme: NotificationsTriggerTheme = {
  color: 'black',
  bg: 'gray.100',
  activeColor: 'blue.500',
  activeBg: 'blue.100',
  hoverBg: 'gray.200',
}

export type NotificationsTriggerProps = Omit<IconButtonProps, 'aria-label'> & {
  theme?: NotificationsTriggerTheme
  isLoading?: boolean
  unreadCount?: number
}

export const NotificationsMenuTrigger = forwardRef<HTMLButtonElement, NotificationsTriggerProps>(
  ({ children, theme = defaultNotificationsTriggerTheme, unreadCount = 0, isLoading, ...props }, ref) => {
    return (
      <IconButton
        ref={ref}
        aria-label="Notifications"
        pos="relative"
        // icon={<Icon w="22px" h="22px" pointerEvents="none" as={HiBell} />}
        icon={
          <>
            <Icon w="22px" h="22px" pointerEvents="none" as={HiBell} />
            <UnreadBadge isLoading={isLoading} unreadCount={unreadCount} />
          </>
        }
        borderRadius="full"
        color={theme?.color}
        bgColor={theme?.bg}
        _active={{
          bgColor: theme?.activeBg,
          color: theme?.activeColor,
        }}
        _hover={{
          color: theme?.hoverColor,
          bgColor: theme?.hoverBg,
        }}
        data-action="notifications-menu"
        {...props}
      />
    )
  }
)