import React, { useState, useEffect } from "react";
import Hero from "./Hero";
import "../css/Home.css";
import TechStack from "./TechStack";
import LangSelect from "./LangSelect";
import Mail from "./Mail";
import Switch from "./Switch";
import Navigation from "./Navigation";
import LinkedInIcon from "../assets/icons/socials/linkedin.svg?react";
import GitHubIcon from "../assets/icons/socials/square-github.svg?react";
import Location from "./Location";
import "animate.css";
import { useTheme } from "../Context/ThemeContext";
import TallContent from "./TallContent";
import "../css/GridContainer.css";

const Home = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [showLocation, setShowLocation] = useState(window.innerWidth > 450);
  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 450);
  const { colormode } = useTheme();

  const social = (url) => () => {
    window.open(url, "_blank", "noopener,noreferrer");
  };

  const [hoverAnimation, setHoverAnimation] = useState("animate__headShake");

  const handleMouseEnter = (setAnimation) => {
    setAnimation(hoverAnimation); // Trigger hover animation
  };

  const handleAnimationEnd = (setAnimation) => {
    setAnimation(""); // Clear animation to prevent re-triggering
  };

  useEffect(() => {
    const handleResize = () => {
      const isSmall = window.innerWidth <= 450;
      setShowLocation(!isSmall);
      setIsSmallScreen(isSmall);
    };

    window.addEventListener("resize", handleResize);

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

  return (
    <div className="gridContainer">
      <Hero
        initialAnimation="animate__flipInX"
        onMouseEnter={handleMouseEnter}
        onAnimationEnd={handleAnimationEnd}
      />
      <TechStack
        initialAnimation="animate__backInLeft"
        onAnimationEnd={handleAnimationEnd}
        isExpanded={isExpanded}
        onExpandToggle={() => setIsExpanded(!isExpanded)}
      />
      {!isExpanded && (
        <>
          <LangSelect
            initialAnimation="animate__zoomIn"
            onAnimationEnd={handleAnimationEnd}
          />
          <Mail
            initialAnimation="animate__zoomIn"
            onAnimationEnd={handleAnimationEnd}
          />
          <Switch
            initialAnimation="animate__zoomIn"
            onAnimationEnd={handleAnimationEnd}
          />
        </>
      )}
      {(!isSmallScreen || !isExpanded) && (
        <TallContent
          initialAnimation="animate__flipInY"
          onMouseEnter={handleMouseEnter}
          onAnimationEnd={handleAnimationEnd}
        />
      )}
      <Navigation
        initialAnimation="animate__backInDown"
        onMouseEnter={handleMouseEnter}
        onAnimationEnd={handleAnimationEnd}
      />
      <div
        className={`linkedIn container animate__animated animate__jackInTheBox `}
        onClick={social("https://www.linkedin.com/in/yousifpaulus/")}
      >
        <LinkedInIcon className="linkedInIcon" />
      </div>
      <div
        className={`github container animate__animated animate__jackInTheBox `}
        onClick={social("https://github.com/yousifpa98")}
      >
        <GitHubIcon className="githubIcon" />
      </div>
      {showLocation && <Location />}
    </div>
  );
};

export default Home;
