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 type { AnalyzeRes, ColorTheme, Meaning } from "@/logic/types";
import { P, Span, useSpeechSynthesis } from "@/hooks/useLang.tsx";
import type { FullWordData, Syllable, Tone } from "@sortug/langlib";
import { cycleNext } from "@sortug/lib";
import FontChanger from "../fonts/FontChanger.tsx";
import { assignColors } from "../Colors.tsx";
import { IconBadgeFilled, IconSpeakerphone } from "@tabler/icons-react";

function Phonetic({
  data,
  lang,
  theme,
}: {
  data: FullWordData;
  lang: string;
  theme: ColorTheme;
}) {
  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 [loading, setLoading] = useState(false);

  const { voices, speaking, speak, stop } = useSpeechSynthesis();
  function playAudio() {
    setLoading(true);
    console.log({ voices, speaking });
    console.log("word", data);
    speak(data.spelling);
    setLoading(false);
  }
  console.log({ data });

  async function saveW() {}

  return (
    <div className="phonetic-data">
      <div className="pronunciation IPA flex1 flex-center">
        <P>{data.phonetic.ipa}</P>
        {loading ? (
          <img src={spinner} className="spinner bc" />
        ) : (
          <IconSpeakerphone onClick={playAudio} />
        )}
      </div>
      <Syllables data={data} />
    </div>
  );
}

export default Phonetic;

function Syllables({ data }: { data: FullWordData }) {
  const syllables = data.phonetic.syllables;

  console.log(data.phonetic.tone_sequence);
  const isTonal = !!data.phonetic.tone_sequence;
  const colorMap = isTonal
    ? (s: Syllable) => s.tone.name
    : (s: Syllable) => (s.stressed ? "stressed" : "neuter");
  const colors = assignColors(syllables.map(colorMap));
  return (
    <div className="syllables">
      {data.phonetic.syllables.map((syl) => (
        <div className="syllable">
          {syl.tone.letters && <Tone tone={syl.tone} />}
          <span>{syl.spelling}</span>
        </div>
      ))}
    </div>
  );
}
function Tone({ tone }: { tone: Tone }) {
  return (
    <div className="tone">
      <IconBadgeFilled>{tone.letters}</IconBadgeFilled>
    </div>
  );
}