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';

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

    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,
            });

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

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

            // Render the canvas
            canvas.renderAll();
        });
    };

    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