import React, { useCallback, useEffect, useState } from "react";
import "../assets/fonts/Thai/style.css";
import { segmentateThai } from "./logic/thainlp";
import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
import { ColoredText } from "../components/Sentence";
import Word from "../components/Word";

export default function ThaiText({
  text,
  openWord,
  theme,
}: {
  text: string;
  openWord: (s: AnalyzeRes) => void;
  theme: ColorTheme;
}) {
  useEffect(() => {
    pythonseg();
  }, [text]);

  const [data, setData] = useState<Array<LangToColor<AnalyzeRes>>>([]);
  const [modal, setModal] = useState<any>();
  const pythonseg = useCallback(async () => {
    const s2 = await segmentateThai(text.trim());
    if ("ok" in s2) {
      const ob = s2.ok.reduce(
        (acc, item) => {
          acc[item.word] = item;
          return acc;
        },
        {} as Record<string, AnalyzeRes>,
      );
      const d = Object.values(ob).map((w) => ({
        data: w,
        colorBy: w.pos,
        display: w.word,
      }));
      setData(d);
      console.log(s2, "s2");
    } else console.error(s2.error);
  }, [text]);

  return (
    <div className="thaitext">
      <ColoredText lang="tha" theme={theme} frags={data} fn={openWord} />
      {modal && <Word data={modal} lang={"tha"} />}
    </div>
  );
}