import React, { memo } from "react";
import { motion } from "motion/react";
import type { ViewProps, LoadingStatus } from "./logic/types";
import { NLP } from "sortug-ai";
import SpacyClause from "./SpacyClause";
import { sentenceVariants, createHoverEffect } from "./animations";
import { useZoom } from "./hooks/useZoom";
import StanzaClause from "./StanzaClause";

interface Props extends ViewProps {
  spacy: NLP.Spacy.Sentence;
  stanzas?: NLP.Stanza.Sentence | undefined;
}

function Sentence(props: Props) {
  const { spacy, stanzas, context, idx } = props;
  const { viewState, handleElementClick } = useZoom();
  const { level, sIndex } = viewState;
  const selected = sIndex === idx;
  const isFocused = level === "sentence" && selected;

  return (
    <>
      <motion.span
        key={idx + spacy.text}
        className={`sentence-wrapper ${selected ? "selected" : ""}`}
        custom={selected}
        variants={sentenceVariants}
        initial="paragraph"
        animate={level}
        onClick={(e) => handleElementClick(e, idx)}
        whileHover={
          level === "paragraph"
            ? createHoverEffect(level, "paragraph", "200, 220, 255")
            : {}
        }
      >
        {level === "paragraph" || !selected ? (
          <span className="sentence">{spacy.text}</span>
        ) : stanzas ? (
          <StanzaClause
            {...props}
            sentence={stanzas}
            rawText={stanzas.text}
            data={stanzas.constituency}
          />
        ) : (
          <SpacyClause sentence={spacy} />
        )}
      </motion.span>
    </>
  );
}

export default memo(Sentence);