import { franc } from "franc-all";
import React, { useCallback, useEffect, useState } from "react";
import ThaiText from "./thai/ThaiText";
import { ColoredText } from "./components/Sentence";
import type { AnalyzeRes, WordData } from "./logic/types";
import { detectScript, langFromScript } from "./logic/utils";
import LatinText from "./latin/LatinText";
import { buildWiktionaryURL, parseWiktionary } from "./logic/wiki";
import type { Result } from "sortug";
import * as Stanza from "./logic/stanza";
import { iso6393To1 } from "./logic/iso6393to1";

export default function Paragraph({
  text,
}: {
  text: string;
  handleWord?: (wd: Result<WordData>) => any;
}) {
  useEffect(() => {
    segmentString();
  }, [text]);
  const [lang, setLang] = useState("");
  const [script, setScript] = useState("");
  const [segs, setSegs] = useState<Stanza.StanzaSegment[]>([]);
  useEffect(() => {
    const res = franc(text);
    console.log();
    console.log({ res, text });
    if (res === "und") detectLanguage();
    else {
      const smol = iso6393To1[res];
      if (!smol) console.log("lang", res);
      else setLang(smol);
    }
  }, [text]);

  const segmentString = useCallback(async () => {
    if (lang) {
      const res = await Stanza.segmenter(text, lang);
      if ("ok" in res) setSegs(res.ok.segments);
      console.log("stanza", res);
    }
  }, [text, lang]);
  const detectLanguage = useCallback(async () => {
    const script = detectScript(text);
    if ("error" in script) console.log("ded");
    else {
      setScript(script.ok);
      const lng = langFromScript(script.ok);
      if ("error" in lng) console.log("ded again!");
      else setLang(lng.ok);
    }
  }, [text]);

  return <div className="segmented-text">{text}</div>;
}