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

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

  const [data, setData] = useState<Record<string, 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 any);
      setData(ob);
      console.log(s2, "s2");
    } else console.error(s2.error);
  }, [text]);

  // function openWord(e: React.MouseEvent<any>) {
  //   const s = e.currentTarget.innerText;
  //   const d = data[s];
  //   setModal(d);
  //   // setModal(<WordModal data={d} lang={lang} />);
  // }
  return (
    <div className="thaitext">
      <ColoredText lang="tha" frags={Object.keys(data)} fn={openWord} />
      {modal && <Word data={modal} lang={"tha"} />}
    </div>
  );
}

function ThaiWord() {
  return <div />;
}