import { PublicationAtom } from "@/recoil/atoms/publication";
import { useState, useEffect, useCallback, useRef, ReactNode } from "react";
import { TTCQueryResolver } from "../ttcQuery/TTCResolvers";
import { useAtom } from "jotai";

export function Resolver({ resolver }: { resolver: string }) {
  const [parser] = useAtom(PublicationAtom);
  const [res] = useState(new TTCQueryResolver(parser));
  const [content, setContent] = useState<ReactNode>("");
  useEffect(() => {
    let resolved = res.resolve(resolver);

    setContent(
      typeof resolved?.display === "function" ? (
        <resolved.display />
      ) : (
        resolved?.display
      ),
    );
  }, [resolver, res]);
  return <span>{content}</span>;
}

const defaultTemplate = "$x";
export function OnDemandResolver({
  resolver,
  template,
  title,
}: {
  resolver: string;
  template: string;
  title?: string;
}) {
  const [parser] = useAtom(PublicationAtom);
  const res = useRef(new TTCQueryResolver(parser));
  const [content, setContent] = useState<ReactNode>("");
  const generateContent = useCallback(() => {
    setContent(() => {
      let content = template || defaultTemplate;

      const stackIdxs = Array.from(new Set(content.match(/\$(?:\d+|x)/g)));
      for (const idx of stackIdxs) {
        let thing = res.current.getFromStack(idx);
        if (Array.isArray(thing)) thing = thing.at(0);
        console.log(thing);
        if (typeof thing.display === "function") {
          const disp = thing.display();
          if (typeof disp === "string" || typeof disp === "number")
            content = content.replaceAll(idx, disp.toString());
          else return disp as ReactNode;
        }
        // else if (idx === defaultTemplate && )
        else content = content.replaceAll(idx, thing.display as string);
        return content;
      }
    });
  }, [res, template]);

  const resolve = useCallback(() => {
    res.current.resolve(resolver, true);
    generateContent();
  }, [res, resolver, generateContent]);

  return (
    <div className="my-2 rounded-md p-1 bg-black/20 flex flex-col">
      <button
        className="text-primary-600"
        onMouseDown={() => setContent("")}
        onClick={resolve}
      >
        {title ?? "Resolve"}
      </button>
      <br />
      {!!content && <span>{content}</span>}
    </div>
  );
}