<script lang="ts">
  import type { InboxMessage, InspectorItem } from '../types';

  export let messages: InboxMessage[];
  export let onInspect: (item: InspectorItem) => void;

  function inspectMessage(message: InboxMessage) {
    onInspect({ title: message.title, type: 'Inbox message', description: message.summary, properties: [{ label: 'Source', value: message.source }, { label: 'Status', value: message.status }, { label: 'Tag', value: message.tag }, { label: 'Time', value: message.time }] });
  }
</script>

<section class="channel-page inbox-channel">
  <header class="channel-header"><p>Message Flow</p><h1>Inbox</h1></header>
  <div class="message-list">
    {#each messages as message}
      <article class="message-row">
        <div><small>{message.source} · {message.time}</small><h2>{message.title}</h2><p>{message.summary}</p><span>{message.status} · #{message.tag}</span></div>
        <button aria-label={`Inspect ${message.title}`} on:click={() => inspectMessage(message)}>Inspect</button>
      </article>
    {/each}
  </div>
</section>
