import { Badge } from '@tidbcloud/uikit'
import { IconBell03 } from '@tidbcloud/uikit/icons'

import { NavButton } from 'dbaas/layouts/v5/SideNavbar/components'
import { useListNotifications } from 'dbaas/services/notification'
import useStores from 'dbaas/stores/useStores'

import { REFETCH_INTERVAL } from './constants'
import { NotificationType } from './types'

export const NotificationCount = ({ toggleDialog }: { toggleDialog: () => void }) => {
  const {
    store: { tenantData }
  } = useStores()

  const { data } = useListNotifications(tenantData.id, NotificationType.UNSEEN, 1, 10, {
    query: {
      refetchInterval: tenantData?.id ? REFETCH_INTERVAL : false,
      refetchOnWindowFocus: false,
      enabled: !!tenantData?.id
    }
  })

  return (
    <NavButton
      icon={<IconBell03 size={16} />}
      data-testid="notification"
      rightSection={
        data?.count ? (
          <Badge variant="filled" size="xs" color="red" style={{ pointerEvents: 'none' }}>
            {data.count}
          </Badge>
        ) : undefined
      }
      onClick={toggleDialog}
      data-mp-event="Notification nav clicked"
    >
      Notification
    </NavButton>
  )
}