'use client'
import {BellIcon} from '@heroicons/react/24/outline'
import {BellIcon as SolidBellIcon} from '@heroicons/react/24/solid'
import {NOTIFICATIONS_PER_PAGE} from 'common/notifications'
import {PrivateUser} from 'common/user'
import {usePathname} from 'next/navigation'
import {useEffect, useState} from 'react'
import {Row} from 'web/components/layout/row'
import {useGroupedUnseenNotifications} from 'web/hooks/use-notifications'
import {usePrivateUser} from 'web/hooks/use-user'

export function NotificationsIcon(props: {className?: string}) {
  const privateUser = usePrivateUser()
  const {className} = props

  return (
    <Row className="relative justify-center">
      {privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
      <BellIcon className={className} />
    </Row>
  )
}

export function SolidNotificationsIcon(props: {className?: string}) {
  const privateUser = usePrivateUser()
  const {className} = props
  return (
    <Row className="relative justify-center">
      {privateUser && <UnseenNotificationsBubble privateUser={privateUser} />}
      <SolidBellIcon className={className} />
    </Row>
  )
}

function UnseenNotificationsBubble(props: {privateUser: PrivateUser}) {
  const pathname = usePathname()
  const {privateUser} = props

  const [seen, setSeen] = useState(false)
  const unseenSourceIdsToNotificationIds =
    useGroupedUnseenNotifications(
      privateUser.id,
      // NOTIFICATION_TYPES_TO_SELECT
    ) ?? []

  const unseenNotifs = Object.keys(unseenSourceIdsToNotificationIds).length

  useEffect(() => {
    if (pathname?.endsWith('notifications')) {
      setSeen(pathname.endsWith('notifications'))
    }
  }, [pathname])

  if (unseenNotifs === 0 || seen) {
    return null
  }

  return (
    <div className="-mt-0.75 text-ink-0 bg-primary-500 absolute ml-3.5 min-w-[15px] rounded-full p-[2px] text-center text-[10px] leading-3 lg:left-0 lg:-mt-1 lg:ml-2">
      {unseenNotifs > NOTIFICATIONS_PER_PAGE ? `${NOTIFICATIONS_PER_PAGE}+` : unseenNotifs}
    </div>
  )
}