<script>
  import moment from "moment";
  import Mention from "$comp/mention.svelte";
  import Comment from "$comp/comment.svelte";
  import UserItem from "$comp/useritem.svelte";
  import { buildCommentTree } from "$lib/client/nodetree";
  import { getNamedId, gotoNamedId } from "$lib/util";
  import { onMount } from "svelte";
  import Rating from "$comp/rating.svelte";
  import CommentList from "$comp/commentlist.svelte";
    import Avatar from "$comp/avatar.svelte";
    import Ago from "$comp/ago.svelte";
    import Actionbar from "$comp/actionbar.svelte";

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

  /**
   * @type {import("$types/base").CommentTreeNode[] | null}
   */
  export let commentTree = null;
</script>

<style lang="scss">
  .body {
    width: 100%;
  }

  .post {
    display: flex;
    flex-direction: column;

    gap: 16px
  }

  .titleBar {
    display: flex;
    flex-flow: column nowrap;
    align-items: start;
    justify-content: center;
    flex: 1;
  }

  .postHead {
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
  }

  .commentsPart {
    display: flex;
    flex-flow: column nowrap;
    gap: 32px;
  }

  .commentsHead {
    width: 100%;
    border-bottom: 1px solid var(--gray);

    margin-top: 32px;
  }

  .postInfo {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    align-items: start;
    justify-content: space-between;
    width: 100%;
  }
</style>

<div class="body">
  <article class="post">
    <div class="postHead">
      <Avatar size={64}></Avatar>
      <div class="titleBar">
        <div class="postInfo">
          <Mention user={post.author}></Mention>
          <Ago date={post.postDate}></Ago>
        </div>
        <h1 class="typeTitle">{post.name}</h1>
      </div>
    </div>
  
    <p class="postContent">
      {post.content}
    </p>
  
    <Actionbar message={post}></Actionbar>
  </article>
  
  {#if commentTree}
  <div class="commentsPart">
    <div class="commentsHead"></div>

    <CommentList commentTreeList={commentTree} getTags={(comment) => {
      if (comment.author?.id == post.author?.id) {
        return ["Original 🖋️"];
      }
      return [];
    }}></CommentList>
  </div>
  {/if}
</div>
