import useLocalState from "@/state/state";
import type { Poast } from "@/types/trill";
import Sigil from "@/components/Sigil";
import { useState, type FormEvent } from "react";
import type { ComposerData } from "@/types/ui";
import Snippets, { ReplySnippet } from "./Snippets";
import toast from "react-hot-toast";
import { useLocation } from "wouter";

function Composer({
  isAnon,
  replying,
}: {
  isAnon?: boolean;
  replying?: Poast;
}) {
  const [loc, navigate] = useLocation();
  const { api, composerData, addNotification, setComposerData } = useLocalState((s) => ({
    api: s.api,
    composerData: s.composerData,
    addNotification: s.addNotification,
    setComposerData: s.setComposerData,
  }));
  const our = api!.airlock.our!;
  const [input, setInput] = useState(replying ? `${replying}: ` : "");
  async function poast(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    // TODO
    // const parent = replying ? replying : null;
    // const tokens = tokenize(input);
    // const post: SentPoast = {
    //   host: parent ? parent.host : our,
    //   author: our,
    //   thread: parent ? parent.thread : null,
    //   parent: parent ? parent.id : null,
    //   contents: input,
    //   read: openLock,
    //   write: openLock,
    //   tags: input.match(HASHTAGS_REGEX) || [],
    // };
    // TODO make it user choosable
    const res = await api!.addPost(input);
    if (res) {
      // Check for mentions in the post (ship names starting with ~)
      const mentions = input.match(/~[a-z-]+/g);
      if (mentions) {
        mentions.forEach(mention => {
          if (mention !== our) { // Don't notify self-mentions
            addNotification({
              type: "mention",
              from: our,
              message: `You mentioned ${mention} in a post`,
            });
          }
        });
      }

      // If this is a reply, add notification
      if (composerData?.type === "reply" && composerData.post?.trill?.author !== our) {
        addNotification({
          type: "reply",
          from: our,
          message: `You replied to ${composerData.post.trill.author}'s post`,
          postId: composerData.post.trill.id,
        });
      }

      setInput("");
      setComposerData(null); // Clear composer data after successful post
      toast.success("post sent");
      navigate(`/feed/${our}`);
    }
  }
  const placeHolder = isAnon ? "> be me" : "What's going on in Urbit";
  return (
    <form id="composer" onSubmit={poast}>
      <div className="sigil avatar">
        <Sigil patp={our} size={46} />
      </div>

      {composerData && composerData.type === "reply" && (
        <ReplySnippet post={composerData?.post} />
      )}
      <input
        value={input}
        onInput={(e) => setInput(e.currentTarget.value)}
        placeholder={placeHolder}
      />
      {composerData && composerData.type === "quote" && (
        <Snippets post={composerData?.post} />
      )}
      <button type="submit">Post</button>
    </form>
  );
}

export default Composer;
