1 files changed, 72 insertions, 8 deletions
diff --git a/packages/prosody-ui/src/LangText.tsx b/packages/prosody-ui/src/LangText.tsx
index 790c499..ab9d4f4 100644
--- a/packages/prosody-ui/src/LangText.tsx
+++ b/packages/prosody-ui/src/LangText.tsx
@@ -2,27 +2,31 @@ import { franc } from "franc-all";
 import React, { useEffect, useState } from "react";
 import ThaiText from "./thai/ThaiText";
 import { ColoredText } from "./components/Sentence";
-import type { AnalyzeRes, WordData } from "./logic/types";
+import type { AnalyzeRes, ColorTheme, WordData } from "./logic/types";
 import { detectScript, scriptFromLang } from "./logic/utils";
 import LatinText from "./latin/LatinText";
 import { buildWiktionaryURL, parseWiktionary } from "./logic/wiki";
-import type { Result } from "sortug";
+import FullWord from "./components/word/FullWordData";
+import type { AsyncRes, Result } from "@sortug/lib";
+import type { FullWordData } from "@sortug/langlib";
 
 export default function LangText({
   text,
   lang,
   theme,
-  fetchWiki,
   handleWord,
+  handleError,
 }: {
   text: string;
+  theme?: ColorTheme;
   lang?: string;
-  theme?: string;
-  fetchWiki?: (url: string) => Promise<string>;
-  handleWord?: (wd: Result<WordData>) => any;
+  handleWord?: (word: AnalyzeRes) => any;
+  handleError?: (error: string) => any;
 }) {
+  const background: ColorTheme = theme ? theme : "light";
   const [llang, setLang] = useState("");
   const [script, setScript] = useState(scriptFromLang(lang || "", text));
+  const [modal, setWordModal] = useState<FullWordData | null>(null);
   useEffect(() => {
     if (!lang) {
       const res = franc(text);
@@ -31,7 +35,27 @@ export default function LangText({
   }, [text]);
   console.log("langtext", { text, llang, script });
 
-  async function openWord(word: string) {
+  async function openWord(word: AnalyzeRes) {
+    if (handleWord) handleWord(word);
+    else {
+      const body = JSON.stringify({
+        getWordFull: { spelling: word.word, lang: llang },
+      });
+      const opts = {
+        method: "POST",
+        body,
+        headers: { "Content-type": "application/json" },
+      };
+      const res = await fetch("/api/db", opts);
+      const j = (await res.json()) as Result<FullWordData>;
+      console.log({ j });
+      if ("error" in j) {
+        if (handleError) handleError(j.error);
+        else console.error("error opening word", j.error);
+      } else {
+        setWordModal(j.ok);
+      }
+    }
     // console.log("looking up", word);
     // const url = buildWiktionaryURL(word);
     // const html = await fetchWiki(url);
@@ -56,12 +80,20 @@ export default function LangText({
   return (
     <div className="lang-text-container">
       {script === "Thai" ? (
-        <ThaiText text={text} openWord={openWord} />
+        <ThaiText text={text} theme={background} openWord={openWord} />
       ) : script === "Latin" ? (
         <LatinText text={text} lang={llang} openWord={openWord} />
       ) : (
         <Generic text={text} lang={llang} />
       )}
+      {modal && (
+        <WordModal
+          word={modal}
+          lang={llang}
+          theme={background}
+          onClose={() => setWordModal(null)}
+        />
+      )}
     </div>
   );
 }
@@ -76,3 +108,35 @@ function Generic({ text, lang }: { text: string; lang: string }) {
   // {data && <ColoredText frags={Object.keys(data)} />}
   return <div className="lang-text-div"></div>;
 }
+
+function WordModal({
+  word,
+  lang,
+  theme,
+  onClose,
+}: {
+  word: FullWordData;
+  lang: string;
+  theme: ColorTheme;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      id="modal-bg"
+      role="dialog"
+      aria-modal="true"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div
+        id="modal-fg"
+        style={{ backgroundColor: "white", border: "5px solid black" }}
+      >
+        <FullWord data={word} lang={lang} theme={"light"} />
+      </div>
+    </div>
+  );
+}