<script>
    import moment from "moment";
    import Avatar from "./avatar.svelte";
    import Mention from "./mention.svelte";
    import Rating from "./rating.svelte";

  /**
   * @type {import("$types/base").CommentTreeNode}
   */
  export let commentNode;

  /**
   * @type {(function(import("$types/base").Comment): string[]) | undefined}
   */
  export let getTags = undefined;

  $: comment = commentNode.parent;

  $: tags = getTags ? getTags(comment) : [];
</script>

<style lang="scss">
  .message {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
  }

  .content {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    gap: 8px;
  }

  .topBar {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    align-items: start;
    justify-content: space-between;
  }

  .nameField {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;

    & > .tag {
      color: var(--white-dim);
    }
  }

  .date {
    color: var(--white-dim);
  }
</style>

<div class="message">
  <Avatar size={48}></Avatar>
  <div class="content">
    <div class="topBar">
      <div class="nameField">
        <Mention user={comment.author}></Mention>
        {#each tags as tag}
        <span class="tag typeContent">{tag}</span>
        {/each}
      </div>

      <span class="date">{moment(comment.commentDate).fromNow()}</span>
    </div>

    <p>{comment.content}</p>

    <div class="actionBar">
      <Rating rating={comment.rating}></Rating>
    </div>

    <div class="replyTree">
      {#each commentNode.children as reply}
        <svelte:self commentNode={reply} getTags={getTags}></svelte:self>
      {/each}
    </div>
  </div>
</div>
