import { ProjectType } from "../../types";
import ProjectsSection from "./ProjectsSection";
import { projects as mockProjects } from "../../consts/galleryPage";
import useStore from "../../store/store";
import { projectTabs } from "../../consts/galleryPage";
import { useEffect, useState } from "react";

function getSlicedProjects(projects: ProjectType[]) {
  const chunkSize = 5;
  const slicedProjects = [];

  for (let i = 0; i < projects.length; i += chunkSize) {
    const chunk = projects.slice(i, i + chunkSize);
    slicedProjects.push(chunk);
  }

  return slicedProjects;
}

const ProjectsContainer = () => {
  const { selectedTab } = useStore();
  const [projects, setProjects] = useState(mockProjects);
  useEffect(() => {
    if (selectedTab.id === projectTabs[0].id) {
      setProjects(mockProjects);
    } else {
      const filteredProjects = mockProjects.filter((project) =>
        project.tabs.some((tab) => tab.id === selectedTab.id)
      );
      setProjects(filteredProjects);
    }

    return () => {};
  }, [selectedTab]);

  const slicedProjects = getSlicedProjects(projects);

  return (
    <div className="flex flex-col gap-5 pb-32">
      {slicedProjects.map((pr) => (
        <ProjectsSection projects={pr} />
      ))}
    </div>
  );
};

export default ProjectsContainer;