import React, { useState } from "react";
import clsx from "clsx";
import ReactIcon from "../assets/icons/skill-icons/icons/React-Dark.svg?react";
import NodeIcon from "../assets/icons/skill-icons/icons/NodeJS-Dark.svg?react";
import MongoIcon from "../assets/icons/skill-icons/icons/MongoDB.svg?react";
import RailsIcon from "../assets/icons/skill-icons/icons/Rails.svg?react";
import NextJsIcon from "../assets/icons/skill-icons/icons/NextJS-Dark.svg?react";
import DockerIcon from "../assets/icons/skill-icons/icons/Docker.svg?react";
import TypeScriptIcon from "../assets/icons/skill-icons/icons/TypeScript.svg?react";
import ExpressIcon from "../assets/icons/skill-icons/icons/ExpressJS-Dark.svg?react";
import KubernetesIcon from "../assets/icons/skill-icons/icons/Kubernetes.svg?react";
import GitIcon from "../assets/icons/skill-icons/icons/Git.svg?react";
import TailwindIcon from "../assets/icons/skill-icons/icons/TailwindCSS-Dark.svg?react";
import PostgreSQL from "../assets/icons/skill-icons/icons/PostgreSQL-Dark.svg?react";
import NestjsIcon from "../assets/icons/skill-icons/icons/NestJS-Dark.svg?react";
import Linux from "../assets/icons/skill-icons/icons/Linux-Dark.svg?react";

import "../css/TechStack.css";
import { Link } from "react-router-dom";
import { useTheme } from "../Context/ThemeContext";
import { useLang } from "../Context/LangContext";

const TechStack = ({
  initialAnimation,
  onAnimationEnd,
  isExpanded,
  onExpandToggle,
}) => {
  const techStack = [
    { name: "React", component: ReactIcon, className: "reactIcon", id: 1 },
    { name: "Node.js", component: NodeIcon, className: "nodeIcon", id: 2 },
    { name: "MongoDB", component: MongoIcon, className: "mongoIcon", id: 3 },
    {
      name: "Ruby on Rails",
      component: RailsIcon,
      className: "railsIcon",
      id: 4,
    },
    { name: "Next.js", component: NextJsIcon, className: "nextJsIcon", id: 5 },
    { name: "Docker", component: DockerIcon, className: "dockerIcon", id: 6 },
    {
      name: "TypeScript",
      component: TypeScriptIcon,
      className: "typescriptIcon",
      id: 7,
    },
    {
      name: "Express.js",
      component: ExpressIcon,
      className: "expressIcon",
      id: 8,
    },
    {
      name: "Kubernetes",
      component: KubernetesIcon,
      className: "kubernetesIcon",
      id: 9,
      needExpand: true,
    },
    {
      name: "Git",
      component: GitIcon,
      className: "gitIcon",
      id: 10,
      needExpand: true,
    },
    {
      name: "Tailwind CSS",
      component: TailwindIcon,
      className: "tailwindIcon",
      id: 11,
      needExpand: true,
    },
    {
      name: "PostgreSQL",
      component: PostgreSQL,
      className: "postgresqlIcon",
      id: 12,
      needExpand: true,
    },
    {
      name: "NestJS",
      component: NestjsIcon,
      className: "nestjsIcon",
      id: 13,
      needExpand: true,
    },
    {
      name: "Linux",
      component: Linux,
      className: "linuxIcon",
      id: 14,
      needExpand: true,
    },
  ];

  const [animation, setAnimation] = useState(initialAnimation);
  const { colormode } = useTheme();
  const { language } = useLang();

  return (
    <div
      className={clsx(
        "techStackContainer",
        "container",
        colormode === "light" ? "light" : "dark",
        "animate__animated",
        animation,
        { expanded: isExpanded }
      )}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <h2>Tech Stack</h2>
      <div className="techStack">
        {techStack
          .filter((tech) => isExpanded || !tech.needExpand)
          .map((tech) => {
            const IconComponent = tech.component;
            return (
              <div key={tech.id} className="techStackItem tooltip">
                <IconComponent className={`techIcon ${tech.className}`} />
                <span className="tooltipText">{tech.name}</span>
              </div>
            );
          })}
      </div>
      <Link
        to="#"
        className="techStackShowMore"
        onClick={(e) => {
          e.preventDefault();
          onExpandToggle();
        }}
      >
        {isExpanded
          ? `${language === "en-GB" ? "Show Less" : "Weniger"}`
          : `${language === "en-GB" ? "Show More" : "Mehr"}`}
      </Link>
    </div>
  );
};

export default TechStack;