"use client";
import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import FullText from "./FullText";
import "./zoom.css";
import { useZoom, ZoomProvider } from "./hooks/useZoom";
import { NLP } from "sortug-ai";
import { Loader2 } from "lucide-react";

const App: React.FC = () => {
  const { viewState } = useZoom();
  const [isLoading, setLoading] = useState(true);
  const [spacy, setSpacy] = useState<NLP.Spacy.SpacyRes>();
  const [stanza, setStanza] = useState<NLP.Stanza.StanzaRes>();
  useEffect(() => {
    const sp = sessionStorage.getItem("spacyres");
    const st = sessionStorage.getItem("stanzares");
    if (sp) setSpacy(JSON.parse(sp));
    if (st) setStanza(JSON.parse(st));
    setLoading(false);
  }, []);
  console.log(viewState.level, "level");
  return (
    <>
      <motion.header
        className="app-header"
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2, duration: 0.5 }}
      >
        <p className="instructions">
          Click on any text element to zoom in, exploring language from:
          <br />
          <span>
            <span className={viewState.level === "text" ? "highlight" : ""}>
              Text
            </span>
            <span>→</span>
            <span
              className={viewState.level === "paragraph" ? "highlight" : ""}
            >
              Paragraph
            </span>
            <span>→</span>
            <span className={viewState.level === "sentence" ? "highlight" : ""}>
              Sentence
            </span>
            <span>→</span>
            <span className={viewState.level === "clause" ? "highlight" : ""}>
              Clause
            </span>
            <span>→</span>
            <span className={viewState.level === "word" ? "highlight" : ""}>
              Word
            </span>
            <span>→</span>
            <span className={viewState.level === "syllable" ? "highlight" : ""}>
              Syllable
            </span>
            <span>→</span>
            <span className={viewState.level === "phoneme" ? "highlight" : ""}>
              Phoneme
            </span>
          </span>
          <br />
          Click the Back button or on empty space to return to the previous
          level.
        </p>
      </motion.header>

      <main>
        {isLoading ? (
          <Loader2 />
        ) : spacy ? (
          <FullText text={spacy.input} doc={spacy} stanza={stanza} />
        ) : (
          <p>Oops</p>
        )}
      </main>

      <motion.footer
        className="app-footer"
        initial={{ opacity: 0 }}
        animate={{ opacity: 0.7 }}
        transition={{ delay: 1.5 }}
      >
        <p>A language learning tool with seamless zoom animations</p>
      </motion.footer>
    </>
  );
};
export default function () {
  return (
    <ZoomProvider>
      <App />
    </ZoomProvider>
  );
}