import type { mastodon } from "masto";
import { Show, type Component } from "solid-js";
import tootStyle from "./toot.module.css";
import { formatRelative } from "date-fns";
import Img from "../material/Img";
import { Body2 } from "../material/typography";
import { appliedCustomEmoji } from "../masto/toot";
import { TootPreviewCard } from "./RegularToot";

type CompactTootProps = {
  status: mastodon.v1.Status;
  now: Date;
  class?: string;
};

const CompactToot: Component<CompactTootProps> = (props) => {
  const toot = () => props.status;
  return (
    <section
      class={[tootStyle.toot, tootStyle.compact, props.class || ""].join(" ")}
      lang={toot().language || undefined}
    >
      <Img
        src={toot().account.avatar}
        class={[tootStyle.tootAvatar].join(" ")}
      />
      <div class={[tootStyle.compactAuthorGroup].join(" ")}>
        <Body2
          ref={(e: { innerHTML: string }) => {
            appliedCustomEmoji(
              e,
              toot().account.displayName,
              toot().account.emojis,
            );
          }}
        ></Body2>
        <span class={tootStyle.compactAuthorUsername}>
          @{toot().account.username}@{new URL(toot().account.url).hostname}
        </span>
        <time datetime={toot().createdAt}>
          {formatRelative(props.now, toot().createdAt)}
        </time>
      </div>
      <div
        ref={(e: { innerHTML: string }) => {
          appliedCustomEmoji(e, toot().content, toot().emojis);
        }}
        class={[tootStyle.compactTootContent].join(" ")}
      ></div>
      <Show when={toot().card}>
        <TootPreviewCard src={toot().card!} alwaysCompact />
      </Show>
    </section>
  );
};

export default CompactToot;