import { useContext, useEffect, useRef } from "react";
import { Button } from "../ui/button";
import CanvasContext from "../Context/canvasContext/CanvasContext";
import { X } from "lucide-react";
import { ScrollArea } from "../ui/scroll-area";
import AllIconsPage from "../EachComponent/Icons/AllIcons";
import { useParams } from "react-router-dom";
import useProject from "@/hooks/useProject";

const IconPanel = () => {
  const { setSelectedPanel } = useContext(CanvasContext);

  const params = useParams();
  const { id } = params;
  const { createEmptyProject } = useProject();
  const hasCreatedProject = useRef(false);

  useEffect(() => {
    if (!id && !hasCreatedProject.current) {
      createEmptyProject();
      hasCreatedProject.current = true; // Prevent further calls
    }
  }, [id, createEmptyProject]);

  return (
    <div>
      <div className="flex justify-between items-center p-4 border-b">
        <h2 className="text-lg font-semibold">Icons</h2>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setSelectedPanel("")}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>

      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
        <AllIconsPage />
      </ScrollArea>
    </div>
  );
};

export default IconPanel;