import React, { memo, useState } from "react";
import { motion } from "motion/react";
import "./spacy.css";
import { NLP } from "sortug-ai";
// import { clauseVariants, createHoverEffect } from "./animations";
// import { useZoom } from "./hooks/useZoom";

function Grammar({ sentence }: { sentence: NLP.Spacy.Sentence }) {
  const [hoveredClause, setHoveredClause] = useState<number | null>(null);

  // Ref to manage the timeout for debouncing mouse leave
  return (
    <div className="clause-container">
      {sentence.words.map((w, idx) => {
        const isRoot =
          w.ancestors.length === 0 || w.dep.toLowerCase() === "root";
        const isSubj = NLP.Spacy.isChild(w, sentence.subj.id);
        const isPred = !isSubj && !isRoot;
        const predClass = isPred ? "pred" : "";
        const relClass = isRoot ? "root" : `rel-${w.dep}`;
        const ownClass = isRoot
          ? ""
          : isSubj
            ? "subj"
            : w.children.length === 0
              ? ""
              : `clause-${w.id}`;
        const clase = w.ancestors.reduce((acc, item) => {
          if (item === sentence.subj.id || item === sentence.root.id)
            return acc;
          else return `${acc} clause-${item}`;
        }, ``);
        const className = `suword ${relClass} ${ownClass} ${clase} ${predClass}`;
        const isHovering =
          !isRoot &&
          !!hoveredClause &&
          (w.id === hoveredClause || w.ancestors.includes(hoveredClause));
        function handleClick(w: NLP.Spacy.Word) {
          console.log("show the whole clause and all that", w);
        }
        return (
          <ClauseSpan
            word={w}
            key={w.id}
            className={className}
            hovering={isHovering}
            setHovering={setHoveredClause}
            onClick={handleClick}
          />
        );
      })}
    </div>
  );
}

const spanVariants: any = {
  initial: {
    // Base style
    backgroundColor: "rgba(0, 0, 0, 0)", // Transparent background initially
    fontWeight: "normal",
    scale: 1,
    zIndex: 0, // Default stacking
    position: "relative", // Needed for zIndex to work reliably
    // Add other base styles if needed
  },
  hovered: {
    // Style when this span's group is hovered
    backgroundColor: "rgba(255, 255, 0, 0.5)", // Yellow highlight
    scale: 1.05,
    zIndex: 1, // Bring hovered spans slightly forward
    boxShadow: "0px 2px 5px rgba(0,0,0,0.2)",
    // Add other hover effects
  },
};

// Define the transition
const spanTransition = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  // duration: 0.1 // Or use duration for non-spring types
};

function ClauseSpan({
  word,
  className,
  hovering,
  setHovering,
  onClick,
}: {
  word: NLP.Spacy.Word;
  className: string;
  hovering: boolean;
  setHovering: (n: number | null) => void;
  onClick: (w: NLP.Spacy.Word) => void;
}) {
  function handleMouseOver() {
    setHovering(word.id);
    // if (word.children.length > 0) setHovering(word.id);
    // else setHovering(word.head);
  }
  function handleMouseLeave() {
    setHovering(null);
  }
  function handleClick(e: React.MouseEvent) {
    e.stopPropagation();
    onClick(word);
  }
  return (
    <motion.span
      className={className}
      variants={spanVariants}
      initial="initial"
      animate={hovering ? "hovered" : "initial"}
      transition={spanTransition}
      onMouseOver={handleMouseOver}
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
    >
      {word.text}
    </motion.span>
  );
}

export default memo(Grammar);