import { useState, createContext } from "react";
import { Project } from "../Types/goTypes";
import { Link } from "react-router-dom";
import BasicWindow from "../Components/BasicWindow";

export const ProjectNameContext = createContext("");

function UserProjectPage(): JSX.Element {
  /*   const [projects, setProjects] = useState<Project[]>([]);
   */ const [selectedProject, setSelectedProject] = useState("");

  /* const getProjects = async (): Promise<void> => {
    const username = localStorage.getItem("username") ?? ""; // replace with actual username
    const token = localStorage.getItem("accessToken") ?? ""; // replace with actual token
    const response = await api.getUserProjects(username, token);
    console.log(response);
    if (response.success) {
      setProjects(response.data ?? []);
    } else {
      console.error(response.message);
    }
  };
  // Call getProjects when the component mounts
  useEffect(() => {
    getProjects();
  }, []); */

  // Mock data
  const projects: Project[] = [
    {
      id: 1,
      name: "Project Test App",
      description: "Description 1",
      owner: "Owner 1",
    },
    {
      id: 2,
      name: "Project 2",
      description: "Description 2",
      owner: "Owner 2",
    },
    {
      id: 3,
      name: "Project 3",
      description: "Description 3",
      owner: "Owner 3",
    },
    // Add more mock projects as neededects as needed
  ];

  const handleProjectClick = (projectName: string): void => {
    setSelectedProject(projectName);
  };

  const content = (
    <ProjectNameContext.Provider value={selectedProject}>
      <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
        {projects.map((project, index) => (
          <Link
            to={`/project/${project.name}`}
            onClick={() => {
              handleProjectClick(project.name);
            }}
            key={index}
          >
            <h1 className="font-bold underline text-[30px] cursor-pointer">
              {project.name}
            </h1>
          </Link>
        ))}
      </div>
    </ProjectNameContext.Provider>
  );

  const buttons = <></>;

  return <BasicWindow content={content} buttons={buttons} />;
}

export default UserProjectPage;