import React, { useState, useEffect, useRef } from "react";
import "../css/TallContent.css";
import { useTheme } from "../Context/ThemeContext";
import { useLang } from "../Context/LangContext";

const TallContent = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
  const { colormode } = useTheme();
  const { language } = useLang();
  const canvasRef = useRef(null);

  const speedFactor = 0.2; // Geschwindigkeit anpassen: kleiner = langsamer, größer = schneller

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");

    canvas.width = canvas.parentElement.offsetWidth;
    canvas.height = canvas.parentElement.offsetHeight;

    const particles = Array.from({ length: 50 }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      radius: Math.random() * 4 + 1,
      dx: (Math.random() * 0.5 - 0.25) * speedFactor,
      dy: (Math.random() * 0.5 - 0.25) * speedFactor,
      color: `hsl(${Math.random() * 360}, 70%, 70%)`,
    }));

    const starFieldEffect = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      particles.forEach((particle) => {
        particle.x += particle.dx;
        particle.y += particle.dy;

        // Warp particles when they leave canvas
        if (particle.x < 0) particle.x = canvas.width;
        if (particle.x > canvas.width) particle.x = 0;
        if (particle.y < 0) particle.y = canvas.height;
        if (particle.y > canvas.height) particle.y = 0;

        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
        ctx.fillStyle = particle.color;
        ctx.fill();
      });

      requestAnimationFrame(starFieldEffect);
    };

    starFieldEffect();

    canvas.addEventListener("mousemove", (e) => {
      const rect = canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;

      particles.forEach((particle) => {
        const dx = particle.x - mouseX;
        const dy = particle.y - mouseY;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < 150) {
          const force = (150 - distance) / 150;
          particle.dx += (dx / distance) * force * -0.05;
          particle.dy += (dy / distance) * force * -0.05;
        }
      });
    });

    canvas.addEventListener("click", (e) => {
      const rect = canvas.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;

      particles.forEach((particle) => {
        const dx = particle.x - mouseX;
        const dy = particle.y - mouseY;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < 200) {
          const force = (200 - distance) / 200;
          particle.dx += (dx / distance) * force * 1.5;
          particle.dy += (dy / distance) * force * 1.5;
        }
      });
    });

    const handleResize = () => {
      canvas.width = canvas.parentElement.offsetWidth;
      canvas.height = canvas.parentElement.offsetHeight;
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [speedFactor]);

  return (
    <div
      className={`container tallContent animate__animated ${animation} ${colormode}`}
/*       onMouseEnter={() => onMouseEnter(setAnimation)}
 */      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <canvas ref={canvasRef} className="particleCanvas"></canvas>
    </div>
  );
};

export default TallContent;
