import { openLock } from "@/logic/bunts";
import { HASHTAGS_REGEX } from "@/logic/constants";
import useLocalState from "@/state/state";
import type { Poast, SentPoast } from "@/types/trill";
import Sigil from "@/components/Sigil";
import { useState } from "react";

function Composer({
  isAnon,
  replying,
}: {
  isAnon?: boolean;
  replying?: Poast;
}) {
  const { api, keys } = useLocalState();
  const our = api!.airlock.our!;
  const [input, setInput] = useState(replying ? `${replying}: ` : "");
  async function poast() {
    // 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 pubkey = keys[0]!;
    await api!.addPost(pubkey, input);
  }
  const placeHolder = isAnon ? "> be me" : "What's going on in Urbit";
  return (
    <div id="composer">
      <div className="sigil">
        <Sigil patp={our} size={48} />
      </div>
      <input
        value={input}
        onInput={(e) => setInput(e.currentTarget.value)}
        placeholder={placeHolder}
      />
      <button onClick={poast}>Post</button>
    </div>
  );
}

export default Composer;