import React, { useCallback, useEffect, useState } from "react";
import type { AnalyzeRes } from "../logic/types";
import { ColoredText } from "../components/Sentence";
import Word from "../components/Word";
import { iso6393To1 } from "../logic/iso6393to1";

function segmentate(
  text: string,
  lang: string,
  granularity: "sentence" | "word" | "grapheme",
) {
  // TODO proper error handling here
  console.log("segmenting", lang);
  const la = iso6393To1[lang];
  const lng = la || lang;
  const segmenter = new Intl.Segmenter(lng, { granularity });
  const segments = Array.from(segmenter.segment(text));
  console.log("seg", segments[0]);
  return segments.reduce((acc: string[], s) => {
    const trimmed = s.segment.trim();
    if (trimmed) return [...acc, trimmed];
    else return acc;
  }, []);
}

export default function LatinText({
  text,
  lang,
  openWord,
}: {
  text: string;
  lang: string;
  openWord?: (word: string) => void;
}) {
  useEffect(() => {
    const sentences = segmentate(text, lang, "sentence");
    if (sentences) setSentences(sentences);
  }, [text]);
  const [sentences, setSentences] = useState<string[]>([]);
  console.log({ sentences });
  return (
    <>
      {sentences.map((s, i) => (
        <Sentence key={s + i} text={s} lang={lang} openWord={openWord} />
      ))}
    </>
  );
}

function Sentence({
  text,
  lang,
  openWord,
}: {
  text: string;
  lang: string;

  openWord?: (word: string) => void;
}) {
  useEffect(() => {
    const w = segmentate(text, lang, "word");
    if (w) setWords(w);
    console.log({ words });
  }, [text]);
  const [words, setWords] = useState<string[]>([]);
  console.log({ words });

  // const [data, setData] = useState<Record<string, AnalyzeRes>>({});
  const [word, setWord] = useState<AnalyzeRes>();

  return (
    <>
      <ColoredText frags={words} fn={openWord} />;
      {word && <Word data={word} lang={lang} />}
    </>
  );
}