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

export default function LangText({
  text,
  lang,
  theme,
  handleWord,
  handleError,
}: {
  text: string;
  theme?: ColorTheme;
  lang?: string;
  handleWord?: (word: AnalyzeRes) => any;
  handleError?: (error: string) => any;
}) {
  const background: ColorTheme = theme ? theme : "light";
  const [llang, setLang] = useState("");
  const [script, setScript] = useState(scriptFromLang(lang || "", text));
  const [modal, setWordModal] = useState<FullWordData | null>(null);
  useEffect(() => {
    if (!lang) {
      const res = franc(text);
      setLang(res);
    } else setLang(lang);
  }, [text]);
  console.log("langtext", { text, llang, script });

  async function openWord(word: AnalyzeRes) {
    if (handleWord) handleWord(word);
    else {
      const body = JSON.stringify({
        getWordFull: { spelling: word.word, lang: llang },
      });
      const opts = {
        method: "POST",
        body,
        headers: { "Content-type": "application/json" },
      };
      const res = await fetch("/api/db", opts);
      const j = (await res.json()) as Result<FullWordData>;
      console.log({ j });
      if ("error" in j) {
        if (handleError) handleError(j.error);
        else console.error("error opening word", j.error);
      } else {
        setWordModal(j.ok);
      }
    }
    // 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} theme={background} openWord={openWord} />
      ) : script === "Latin" ? (
        <LatinText text={text} lang={llang} openWord={openWord} />
      ) : (
        <Generic text={text} lang={llang} />
      )}
      {modal && (
        <WordModal
          word={modal}
          lang={llang}
          theme={background}
          onClose={() => setWordModal(null)}
        />
      )}
    </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>;
}

function WordModal({
  word,
  lang,
  theme,
  onClose,
}: {
  word: FullWordData;
  lang: string;
  theme: ColorTheme;
  onClose: () => void;
}) {
  return (
    <div
      id="modal-bg"
      role="dialog"
      aria-modal="true"
      onMouseDown={(event) => {
        if (event.target === event.currentTarget) {
          onClose();
        }
      }}
    >
      <div
        id="modal-fg"
        style={{ backgroundColor: "white", border: "5px solid black" }}
      >
        <FullWord data={word} lang={lang} theme={"light"} />
      </div>
    </div>
  );
}