---
import { docResolver } from "./atproto";
import { type Blob, type LegacyBlob } from "@atcute/lexicons";
import { AppBskyFeedPost } from "@atcute/bluesky";
import { segmentize } from "@atcute/bluesky-richtext-segmenter";
import {
  type Author,
  understoodDid,
  type embed,
  type embedImages,
  type embedVideo,
  type embedExternal,
  type embedRecord,
  type embedRecordWithMedia,
} from "./post-types";
import {
  images,
  video,
  external,
  record,
  recordWithMedia,
} from "./post-embeds";

import BoxTlbr from "/assets/box-tlbr.png";
import Hr from "/assets/hr.png";

interface Props {
  post: AppBskyFeedPost.Main;
  author: Author;
  nested?: boolean;
  rkey: string;
}

const { post, author, nested = false, rkey } = Astro.props;

// resolve the pds. bit hacky but should work
const pds = await docResolver
  .resolve(understoodDid(author.did) ? author.did : "did:plc:failure")
  .then(
    (pds) =>
      pds.service &&
      pds.service.filter(
        (service) => service.type === "AtprotoPersonalDataServer",
      )[0].serviceEndpoint + "",
  );

// helper functions
const cidSrc = (blob: Blob | LegacyBlob, did: `did:${string}:${string}`) =>
  new URL(
    "/xrpc/com.atproto.sync.getBlob/?" +
      new URLSearchParams({
        did: did,
        cid: "cid" in blob ? blob.cid : blob.ref.$link,
      }).toString(),
    pds,
  ).toString();

const embed: embed | null = await (async () => {
  if (!post.embed) return null;
  switch (post.embed.$type) {
    case "app.bsky.embed.images":
      return images(post.embed.images);

    case "app.bsky.embed.video":
      return video(post.embed.video, post.embed.alt, post.embed.captions);

    case "app.bsky.embed.external":
      return external(post.embed.external);

    case "app.bsky.embed.record":
      return await record(post.embed.record.uri, nested);

    case "app.bsky.embed.recordWithMedia":
      return recordWithMedia(
        post.embed.record.record.uri,
        post.embed.media,
        nested,
      );
  }
})();
---

<article
  class="post"
  style={`
    --box-tlbr-png: url(${BoxTlbr.src});
    --hr-png: url(${Hr.src});
  `}
>
  <section class="author">
    {author.avatar && <img src={author.avatar} alt="" class="avatar" />}
    {
      author.displayName ? (
        <a class="name" href={`https://deer.social/profile/${author.did}`}>
          {author.displayName}
        </a>
      ) : null
    }
    <div class="handle">
      @<a href={`https://${author.handle}/`}>{author.handle}</a>
    </div>
    {
      !author.displayName ? (
        <span class="name no-name">
          Profile on
          <a href={`https://aturi.to/${author.did}`}>aturi.to</a>
        </span>
      ) : null
    }
  </section>
  <div class="link">
    Open on
    <a href={`https://aturi.to/${author.did}/app.bsky.feed.post/${rkey}`}>
      aturi.to
    </a>
  </div>
  <hr />
  <section class="content">
    <div>
      <!-- ignore is needed bc otherwise this and 
       the anchors have leading/trailing whitespace 
       and i cant tell prettier to stop sooo -->
      <!-- prettier-ignore -->
      <div class="post-text">{
          !post.facets
            ? post.text
            : segmentize(post.text.trim(), post.facets).map((x) =>  !x.features
                  ? x.text
                  : x.features.reduce(
                      (acc, cur) =>
                        cur.$type === "app.bsky.richtext.facet#link" ? (
                          <a href={cur.uri}>{acc}</a>
                        ) : cur.$type === "app.bsky.richtext.facet#mention" ? (
                          <a href={`https://aturi.to/${cur.did}`}>{acc}</a>
                        ) : (
                          <a href={`https://bsky.app/hashtag/${cur.tag}`}>{acc}</a>
                        ),
                      x.text,
                    ))
        }
      </div>
      {
        embed && (
          <div class="embed">
            {(() => {
              const images = (img: embedImages) =>
                img.images.map((image) => (
                  <img src={cidSrc(image.cid, author.did)} alt={image.alt} />
                ));
              const video = (vid: embedVideo) => (
                <video
                  controls
                  crossorigin="anonymous"
                  src={cidSrc(vid.cid, author.did)}
                  aria-label={vid.alt}
                >
                  {vid.subtitles &&
                    vid.subtitles.map((track, i) => (
                      <track
                        default={i === 0}
                        kind="captions"
                        srclang={track.lang}
                        src={cidSrc(track.cid, author.did)}
                      />
                    ))}
                </video>
              );
              const external = (external: embedExternal) => (
                <a href={external.url} class="external" title={external.url}>
                  {external.thumb && (
                    <img src={cidSrc(external.thumb, author.did)} alt="" />
                  )}
                  <span class="name">{external.title}</span>
                  <span class="url">{new URL(external.url).host}</span>
                </a>
              );
              const record = (record: embedRecord) => {
                const uriFragments = record.uri.match(
                  new RegExp(
                    "at:\/\/(?<did>did:(?:plc|web):[^\/]*)\/(?<nsid>[^\/]*)\/(?<rkey>.*)",
                  ),
                );
                let rkey: string = uriFragments?.groups?.rkey ?? "";
                return record.record && record.author ? (
                  <Astro.self
                    post={record.record}
                    author={record.author}
                    {rkey}
                    nested
                  />
                ) : (
                  <div class="post">
                    Read More on
                    <a
                      href={`https://aturi.to/${author.did}/app.bsky.feed.post/${rkey}`}
                    >
                      aturi.to
                    </a>
                  </div>
                );
              };
              const recordWithMedia = (recordWMedia: embedRecordWithMedia) => {
                const quoted =
                  recordWMedia.record && record(recordWMedia.record);
                const media =
                  recordWMedia.media.$type === "app.bsky.embed.images"
                    ? images(recordWMedia.media)
                    : recordWMedia.media.$type === "app.bsky.embed.video"
                      ? video(recordWMedia.media)
                      : external(recordWMedia.media);
                return (
                  <>
                    {media}
                    {quoted}
                  </>
                );
              };

              switch (embed.$type) {
                case "app.bsky.embed.images":
                  return images(embed);
                case "app.bsky.embed.video":
                  return video(embed);
                case "app.bsky.embed.external":
                  return external(embed);
                case "app.bsky.embed.record":
                  return record(embed);
                case "app.bsky.embed.recordWithMedia":
                  return recordWithMedia(embed);
              }
            })()}
          </div>
        )
      }
    </div>
  </section>
</article>

<style>
  .post,
  .external {
    display: block;
    border-image: var(--box-tlbr-png) 10 10 fill / 20px 20px round;
    padding: 30px;
  }

  .author {
    display: grid;
    grid-template:
      "avatar name" 1.5em
      "avatar handle" 1.5em /
      auto 1fr;

    &:has(.no-name) {
      grid-template-areas: "avatar handle" "avatar name";
    }

    gap: 0 5px;
    align-items: center;
    justify-content: start;

    .avatar {
      grid-area: avatar;
      width: 3em;
      height: 3em;
      border-radius: 100%;
    }

    .name {
      grid-area: name;
      overflow: hidden;
      white-space: nowrap;
      /* use string instead of keyword so its longer */
      text-overflow: "...";
    }

    .handle {
      grid-area: handle;
    }
  }

  hr {
    margin-block: 5px;
    height: 5px;
    border: none;
    border-image: var(--hr-png) 0 5 fill / 0 5px round;
  }

  .post-text {
    overflow-wrap: break-word;
  }

  .embed img {
    image-rendering: smooth;
  }

  .embed .external {
    * {
      display: block;
    }

    img,
    .name {
      margin-bottom: 5px;
    }

    .url {
      opacity: 0.65;
    }
  }

  a {
    color: black;

    &:hover,
    &:focus {
      text-decoration-style: dashed;
    }

    &:active {
      text-decoration: none;
    }
  }

  ul {
    list-style: none;
  }
</style>