import React, { memo, useCallback, useEffect, useState } from "react";
import { motion } from "motion/react";
import type { ViewProps, LoadingStatus } from "./logic/types";
import { NLP } from "sortug-ai";
import Sentence from "./Sentence";
import { paragraphVariants, createHoverEffect } from "./animations";
import { useZoom } from "./hooks/useZoom";

function Paragraph({ rawText, context, idx, doc }: ViewProps) {
  const { viewState, handleElementClick } = useZoom();
  const { level, pIndex } = viewState;
  const selected = pIndex === idx;
  const isFocused = level === "paragraph" && selected;

  // State for sentences
  const [loading, setLoading] = useState<LoadingStatus>("pending");

  return (
    <>
      <motion.div
        key={idx + rawText}
        className={`paragraph-wrapper ${selected ? "selected" : ""}`}
        custom={selected}
        variants={paragraphVariants}
        initial="text"
        animate={level}
        onClick={(e) => handleElementClick(e, idx)}
        whileHover={
          level === "text"
            ? createHoverEffect(level, "text", "255, 255, 200")
            : {}
        }
      >
        {loading === "loading" && <div className="spinner" />}
        {level === "text" || !selected || doc.segs.length === 0 ? (
          <p className="paragraph">{rawText}</p>
        ) : (
          <div className="sentences-container">
            {doc.segs.map((sentence, sentIdx) => (
              <Sentence
                key={sentence.text + sentIdx}
                idx={sentIdx}
                rawText={sentence.text}
                spacy={sentence}
                context={{
                  idx: sentIdx,
                  parentText: rawText,
                  segmented: doc.segs.map((s) => s.text),
                }}
                doc={doc}
              />
            ))}
          </div>
        )}
      </motion.div>
    </>
  );
}

export default memo(Paragraph);
