import type { mastodon } from "masto";
import {
  splitProps,
  type Component,
  type JSX,
  createRenderEffect,
  createMemo,
} from "solid-js";
import { resolveCustomEmoji } from "../../masto/toot.js";
import { makeAcctText, useDefaultSession } from "../../masto/clients";

function preventDefault(event: Event) {
  event.preventDefault();
}

export type TootContentProps = {
  source?: string;
  emojis?: mastodon.v1.CustomEmoji[];
  mentions: mastodon.v1.StatusMention[];
} & JSX.HTMLAttributes<HTMLDivElement>;

const TootContent: Component<TootContentProps> = (props) => {
  const session = useDefaultSession();
  const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]);

  const clientFinder = createMemo(() =>
    session() ? makeAcctText(session()!) : undefined,
  );

  return (
    <div
      ref={(ref) => {
        createRenderEffect(() => {
          ref.innerHTML = managed.source
            ? managed.emojis
              ? resolveCustomEmoji(managed.source, managed.emojis)
              : managed.source
            : "";
        });

        createRenderEffect(() => {
          const finder = clientFinder();
          for (const mention of props.mentions) {
            const elements = ref.querySelectorAll<HTMLAnchorElement>(
              `a[href='${mention.url}']`,
            );
            for (const e of elements) {
              e.onclick = preventDefault;
              e.dataset.action = "acct";
              e.dataset.client = finder;
              e.dataset.acctId = mention.id.toString();
            }
          }
        });
      }}
      {...rest}
    ></div>
  );
};

export default TootContent;