<script lang="ts">
  import Bell from "@assets/icons/bell.svg?dataurl"
  import BellOff from "@assets/icons/bell-off.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
  import {deriveRoom, deriveShouldNotify, getRoomType, RoomType} from "@app/core/state"
  import {notifications} from "@app/util/notifications"
  import {makeRoomPath} from "@app/util/routes"
  import {joinVoiceRoom, currentVoiceSession} from "@app/voice"

  interface Props {
    url: any
    h: any
    notify?: boolean
    replaceState?: boolean
  }

  const {url, h, notify = false, replaceState = false}: Props = $props()

  const room = deriveRoom(url, h)
  const roomType = $derived(getRoomType($room))
  const path = makeRoomPath(url, h)
  const shouldNotifyForSpace = deriveShouldNotify(url)
  const shouldNotifyForRoom = deriveShouldNotify(url, h)
  const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)

  const handleClick = () => {
    if (roomType !== RoomType.Voice) return
    if ($currentVoiceSession?.url === url && $currentVoiceSession?.h === h) return
    void joinVoiceRoom(url, h)
  }
</script>

<SecondaryNavItem
  href={path}
  {replaceState}
  onclick={handleClick}
  notification={notify ? $notifications.has(path) : false}>
  <RoomNameWithImage {url} {h} />
  {#if showDifferenceIcon}
    <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
  {/if}
</SecondaryNavItem>
