import React, { useEffect, useState, type ReactNode } from "react";
import fontIcon from "../assets/icons/font.svg";
import { getScriptPredictor } from "glotscript";
import ThaiFontLoader from "./Thai";

function FontChanger({ text }: { text: string }) {
  const [script, setScript] = useState<string | null>(null);
  useEffect(() => {
    const predictor = getScriptPredictor();
    const res = predictor(text);
    console.log("script predicted", res);
    setScript(res[0]);
  }, [text]);
  useEffect(() => {
    if (script === "Hani") setFontCount(12);
    else if (script === "Thai") setFontCount(6);
    else if (script === "Jpan") setFontCount(5);
    // else if (script === "Latn") setFontCount(6)
  }, [script]);
  const [fontIdx, setFont] = useState(0);
  const [fontCount, setFontCount] = useState(0);
  function changeFont() {
    if (fontIdx === fontCount) setFont(0);
    else setFont((prev) => prev + 1);
  }
  return (
    <div
      className={`font-changer font-${script}-${fontIdx}`}
      lang={script || ""}
    >
      <img
        className="font-icon cp"
        style={{ width: 25 }}
        onClick={changeFont}
        src={fontIcon}
      />
      {script === "Thai" ? <ThaiFontLoader text={text} /> : null}
    </div>
  );
}
// function FontChanger({
//   lang,
//   children,
// }: {
//   lang: string;
//   children: ReactNode;
// }) {
//   useEffect(() => {}, []);
//   const [script, setScript] = useState("Latn");
//   const [fontIdx, setFont] = useState(0);
//   const fontCount = 6;
//   function changeFont() {
//     if (fontIdx === fontCount) setFont(0);
//     else setFont((prev) => prev + 1);
//   }
//   return (
//     <div className="font-changer" lang={script}>
//       <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
//       {children}
//     </div>
//   );
// }

export default FontChanger;