import { franc } from "franc-all";
import React, { useEffect, useState } from "react";
import ThaiText from "./thai/ThaiText";
import { ColoredText } from "./components/Sentence";
import type { AnalyzeRes, WordData } from "./logic/types";
import { detectScript, scriptFromLang } from "./logic/utils";
import LatinText from "./latin/LatinText";
import { buildWiktionaryURL, parseWiktionary } from "./logic/wiki";
import type { Result } from "sortug";

export default function LangText({
  text,
  lang,
  theme,
  fetchWiki,
  handleWord,
}: {
  text: string;
  lang?: string;
  theme?: string;
  fetchWiki?: (url: string) => Promise<string>;
  handleWord?: (wd: Result<WordData>) => any;
}) {
  const [llang, setLang] = useState("");
  const [script, setScript] = useState(scriptFromLang(lang || "", text));
  useEffect(() => {
    if (!lang) {
      const res = franc(text);
      setLang(res);
    } else setLang(lang);
  }, [text]);
  console.log("langtext", { text, llang, script });

  async function openWord(word: string) {
    // console.log("looking up", word);
    // const url = buildWiktionaryURL(word);
    // const html = await fetchWiki(url);
    // const parsed = parseWiktionary(html, url);
    // console.log({ parsed });
    // if ("error" in parsed) handleWord(parsed);
    // else {
    //   const wd: WordData = {
    //     spelling: word,
    //     lang: llang,
    //     ipa: parsed.ok.ipa[0],
    //     meanings: parsed.ok.meanings,
    //     references: { url: parsed.ok.url },
    //   };
    //   handleWord({ ok: wd });
    // }
    // // const d = data[s];
    // // setModal(d);
    // // setModal(<WordModal data={d} lang={lang} />);
  }

  return (
    <div className="lang-text-container">
      {script === "Thai" ? (
        <ThaiText text={text} openWord={openWord} />
      ) : script === "Latin" ? (
        <LatinText text={text} lang={llang} openWord={openWord} />
      ) : (
        <Generic text={text} lang={llang} />
      )}
    </div>
  );
}
function Generic({ text, lang }: { text: string; lang: string }) {
  const [data, setData] = useState<AnalyzeRes>();
  useEffect(() => {
    // segmentate(text, lang)
  }, [text, lang]);
  console.log({ lang }, "generic");
  // <p className="lang-lang">{lang}</p>
  // <p className="lang-text">{text}</p>
  // {data && <ColoredText frags={Object.keys(data)} />}
  return <div className="lang-text-div"></div>;
}