<script>
  import { DateTime } from 'luxon';

  let {
    class: cssClass,
    id,
    at,
    body,
    renderedBody,
    editable = false,
    deleteMessage = async (id) => {}
  } = $props();
  let deleteArmed = $state(false);
  let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));

  function ondelete(event) {
    event.preventDefault();
    if (deleteArmed) {
      deleteArmed = false;
      deleteMessage(id);
    } else {
      deleteArmed = true;
    }
  }

  function onmouseleave() {
    deleteArmed = false;
  }
</script>

<div
  class={[
    'message',
    {
      ['delete-armed']: deleteArmed
    },
    cssClass
  ]}
  role="article"
  data-at={at}
  {onmouseleave}
>
  <div class="handle">
    {atFormatted}
    {#if editable && id}
      <button onclick={ondelete}>&#x1F5D1;&#xFE0F;</button>
    {/if}
  </div>
  <section class="message-body">
    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
    {@html renderedBody}
  </section>
</div>
