<script lang="ts">
  import {onMount} from "svelte"
  import {max, gt, formatTimestampRelative} from "@welshman/lib"
  import {COMMENT} from "@welshman/util"
  import {load} from "@welshman/net"
  import {deriveArray, deriveEventsById} from "@welshman/store"
  import type {TrustedEvent} from "@welshman/util"
  import {repository} from "@welshman/app"
  import {deriveChecked} from "@app/notifications"
  import Reply from "@assets/icons/reply-2.svg?dataurl"
  import Icon from "@lib/components2/Icon.svelte"
  import Badge from "@lib/components2/Badge.svelte"

  const {url, path, event}: {url: string; path: string; event: TrustedEvent} = $props()

  const checked = deriveChecked(path)
  const filters = [{kinds: [COMMENT], "#E": [event.id]}]
  const replies = deriveArray(deriveEventsById({repository, filters}))
  const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))

  onMount(() => {
    load({relays: [url], filters})
  })
</script>

<Badge sm>
  <Icon icon={Reply} size={4} />
  <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
</Badge>
<Badge sm>
  {#if gt(lastActive, $checked)}
    <div class="h-2 w-2 rounded-full" style="background-color: var(--cl-primary);"></div>
  {/if}
  Active {formatTimestampRelative(lastActive)}
</Badge>
