<script lang="ts">
  import { Post } from "./pdsfetch";
  import { Config } from "../../config";
  import { onMount } from "svelte";
  import moment from "moment";
  
  let { post }: { post: Post } = $props();
  console.log(post);
</script>

<div class="postContainer">
  <div class="postHeader">
    {#if post.author.avatar}
      <img
        class="avatar"
        src="{post.author.avatar}"
        alt="avatar of {post.author.displayName}"
      />
    {/if}
    <div class="headerText">
      <a class="displayName" href="{Config.FRONTEND_URL}/profile/{post.author.did}">{post.author.displayName}</a>
      <p class="handle">
        <a href="{Config.FRONTEND_URL}/profile/{post.author.handle}"
          >@{post.author.handle}</a
        >
        <a
          class="postLink" href="{Config.FRONTEND_URL}/profile/{post.author.did}/post/{post.record.id}"
          >{moment(post.record.createdAt).isBefore(moment().subtract(1, "month"))
            ? moment(post.record.createdAt).format("MMM D, YYYY")
            : moment(post.record.createdAt).fromNow()}</a>
      </p>
    </div>
  </div>
  <div class="postContent">
    {#if post.record.quote}
      <a
        class="quotingText"
        href="{Config.FRONTEND_URL}/profile/{post.record.quote.uri}/post/{post
          .quotingUri.rkey}">quoting {post.quotingUri.repo}</a
      >
    {/if}
    <div class="postText">{post.record.text}</div>
    {#if post.record.imagesCid && post.record.imagesCid.length > 0}
      <div id="carouselContainer">
        <img
          class="embedImages"
          alt="Post Image {currentImageIndex + 1} of {post.record.imagesCid.length}"
          src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.record.author.did}&cid={post.record
            .imagesCid[currentImageIndex]}"
        />

        {#if post.imagesCid.length > 1}
          <div class="carouselControls">
            <button
              id="prevBtn"
              onclick={prevImage}
              disabled={currentImageIndex === 0}>←</button
            >
            <div class="carouselIndicators">
              {#each post.record.imagesCid as _, i}
                <div
                  class="indicator {i === currentImageIndex ? 'active' : ''}"
                ></div>
              {/each}
            </div>
            <button
              class="nextBtn"
              onclick={nextImage}
              disabled={currentImageIndex === post.imagesCid.length - 1}
              >→</button
            >
          </div>
        {/if}
      </div>
    {/if}
    {#if post.record.videosLinkCid}
      <!-- svelte-ignore a11y_media_has_caption -->
      <video
        class="embedVideo"
        src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.videosLinkCid}"
        controls
      ></video>
    {/if}
    {#if post.gifLink}
      <img
        class="embedVideo"
        src="{post.record.gifLink}"
        alt="Post GIF"
      />
    {/if}
  </div>
</div>