import { SmartToySharp, Lock } from "@suid/icons-material";
import { formatRelative } from "date-fns";
import type { mastodon } from "masto";
import { createRenderEffect, Show, splitProps, type JSX } from "solid-js";
import Img from "~material/Img";
import { Body2 } from "~material/typography";
import { useAppLocale } from "~platform/i18n";
import { resolveCustomEmoji } from "../../masto/toot";
import "./TootAuthorGroup.css";

function TootAuthorGroup(
  props: {
    status: mastodon.v1.Status;
    now: Date;
  } & JSX.HTMLElementTags["div"],
) {
  const [managed, rest] = splitProps(props, ["status", "now"]);
  const toot = () => managed.status;
  const { dateFn: dateFnLocale } = useAppLocale();

  return (
    <div class="TootAuthorGroup card-gut card-pad" {...rest}>
      <Img src={toot().account.avatar} class="avatar" />
      <div class="name-grp">
        <div class="name-primary">
          <Show when={toot().account.bot}>
            <SmartToySharp class="acct-mark" aria-label="Bot" />
          </Show>
          <Show when={toot().account.locked}>
            <Lock class="acct-mark" aria-label="Locked" />
          </Show>
          <Body2
            component="span"
            innerHTML={resolveCustomEmoji(
              toot().account.displayName,
              toot().account.emojis,
            )}
          />
        </div>
        <time datetime={toot().createdAt}>
          {formatRelative(toot().createdAt, managed.now, {
            locale: dateFnLocale(),
          })}
        </time>
        <span>
          @{toot().account.username}@{new URL(toot().account.url).hostname}
        </span>
      </div>
    </div>
  );
}

export default TootAuthorGroup;