import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
import { useContext } from "react";
import { shapes } from "./shapes";
import { fabric } from "fabric";
import useProject from "@/hooks/useProject";

const CustomShape = () => {
  const { canvas } = useContext(CanvasContext);
  const { setActiveObject } = useContext(ActiveObjectContext);

  const { projectData, projectUpdate, id } = useProject();

  const addShape = (each) => {
    // Load the SVG from the imported file
    fabric.loadSVGFromURL(each, (objects, options) => {
      const svgGroup = fabric.util.groupSVGElements(objects, options);

      // Calculate canvas center
      const centerX = canvas.getWidth() / 2;
      const centerY = canvas.getHeight() / 2;

      // Set properties for centering the SVG
      svgGroup.set({
        left: centerX, // Center horizontally
        top: centerY, // Center vertically
        originX: "center", // Set the origin to the center
        originY: "center",
        fill: "#f09b0a",
        scaleX: 1,
        scaleY: 1,
        strokeWidth: 0,
      });

      // Add SVG to the canvas
      canvas.add(svgGroup);
      canvas.setActiveObject(svgGroup);

      // Update the active object state
      setActiveObject(svgGroup);

      // Render the canvas
      canvas.renderAll();

      const object = canvas.toJSON(['id', 'selectable']);
      const updateData = { ...projectData?.data, object };
      // Wait for the project update before continuing
      projectUpdate({ id, updateData });
    });
  };

  return (
    <div
      className="rounded-md grid grid-cols-3 gap-2 p-2"
      onClick={() => addShape()}
    >
      {shapes.map((each) => (
        <div
          key={each.shape}
          className="relative aspect-square flex items-center justify-center bg-secondary rounded-md cursor-pointer"
          onClick={(e) => {
            e.stopPropagation();
            addShape(each.source);
          }}
        >
          <img
            src={each.source}
            alt={`Shape ${each.shape}`}
            className="max-w-full max-h-full p-1 object-contain hover:bg-gray-200 rounded-md transition-colors duration-200"
          />
        </div>
      ))}
    </div>
  );
};

export default CustomShape;