import React, { useCallback, useEffect, useState } from "react";
import spinner from "../assets/icons/spinner.svg";
import likeIcon from "../assets/icons/heart.svg";
import commentsIcon from "../assets/icons/quote.svg";
import shareIcon from "../assets/icons/share.svg";
import fontIcon from "../assets/icons/font.svg";
import bookmarkIcon from "../assets/icons/bookmark.svg";
import speakerIcon from "../assets/icons/speaker.svg";
import type { AnalyzeRes, Meaning } from "../logic/types";
import { ColoredText } from "./Sentence.tsx";
import { P, Span, useSpeechSynthesis } from "../hooks/useLang.tsx";

function Word({ data, lang }: { data: AnalyzeRes; lang: string }) {
  async function load() {
    // const wiki = await fetchWiki(data.word);
    // console.log(wiki, "wiki res");
    // if ("ok" in wiki) setM(wiki.ok.meanings);
    // else setError(wiki.error);
    // setLoading(false);
  }
  useEffect(() => {
    load();
  }, []);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [meanings, setM] = useState<Meaning[]>([]);
  const [font, setFont] = useState(0);

  function changeFont() {
    if (font === 6) setFont(0);
    else setFont(font + 1);
  }
  const { voices, speaking, speak, stop } = useSpeechSynthesis();
  function playAudio() {
    console.log({ voices, speaking });
    console.log("word", data.word);
    speak(data.word);
  }

  async function saveW() {}

  return (
    <div className={`font-${font}`} id="word-modal" title={data.word}>
      <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
      <img className="save-icon cp" onClick={saveW} src={bookmarkIcon} />
      <div className="original">
        <ColoredText frags={data.syllables} />
      </div>
      <div className="pronunciation IPA flex1 flex-center">
        <P>{`/${data.ipa.replace(/\s/g, "")}/`}</P>
        <img onClick={playAudio} className="icon cp" src={speakerIcon} />
      </div>
      <div className="meanings">
        {loading ? (
          <img src={spinner} className="spinner bc" />
        ) : (
          meanings.map((m) => (
            <div key={JSON.stringify(m)} className="meaning">
              <div className="pos">
                <Span>{m.pos}</Span>
              </div>
              <ol>
                {m.meaning.map((t, i) => (
                  <li key={t + i} className="translation">
                    <P>{t}</P>
                  </li>
                ))}
              </ol>
            </div>
          ))
        )}
        {error && <div className="error">{error}</div>}
      </div>
    </div>
  );
}

export default Word;

// function FloatingButtons({
//   tweet,
//   avatar,
//   changeFont,
// }: {
//   tweet: Tweet;
//   avatar: string;
//   changeFont: any;
// }) {
//   const { apiKeys, prompts, setModal } = useGlobalState();
//   function openUser() {}
//   function openComments() {}
//   function openShare() {}
//   async function doLike() {
//     const key = apiKeys.openai;
//     // TODO hide button if key not set
//     console.log(tweet.text, "whole text");
//     console.log(tweet.media, "media");
//     if (tweet.media[0] && !tweet.media[0].isVideo) {
//       const res = await vision(tweet.media[0].url, "", key);
//       console.log(res, "vision res");
//     }
//     // const res = await translate(tweet.text, prompts.translate,key);
//     // if ("ok" in res)
//     // setModal(<TranslationModal text={res.ok.choices[0].message.content}/>)
//   }
//   async function doBookmark() {}
//   return (
//     <div id="entry-icons">
//       <div className="avatar">
//         <img className="cp" onClick={openUser} src={avatar} />
//       </div>
//       <img className="cp" onClick={doLike} src={likeIcon} />
//       <img className="cp" onClick={openComments} src={commentsIcon} />
//       <img className="cp" onClick={doBookmark} src={bookmarkIcon} />
//       <img className="cp" onClick={openShare} src={shareIcon} />
//       <img className="cp" onClick={changeFont} src={fontIcon} />
//     </div>
//   );
// }