import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { useContext, useEffect, useState } from "react";
import CollapsibleComponent from "./CollapsibleComponent";

const ScaleObjects = () => {
    const { canvas } = useContext(CanvasContext); // Access Fabric.js canvas from context
    const { activeObject } = useContext(ActiveObjectContext);
    const [scaleX, setScaleX] = useState(1);
    const [scaleY, setScaleY] = useState(1);

    useEffect(() => {
        if (activeObject) {
            setScaleX(activeObject?.scaleX);
            setScaleY(activeObject?.scaleY);
        }
    }, [activeObject])

    // Handle scaleX changes
    const handleScaleXChange = (value) => {
        const newScaleX = Math.max(0.001, Math.min(value)); // Clamp scaleX between 0.001 and 3
        setScaleX(newScaleX);
        if (canvas && activeObject) {
            activeObject.scaleX = newScaleX;
            canvas.discardActiveObject();
            canvas.setActiveObject(activeObject);
            canvas.renderAll(); // Re-render the canvas
        }
    };

    // Handle scaleY changes
    const handleScaleYChange = (value) => {
        const newScaleY = Math.max(0.001, Math.min(value)); // Clamp scaleY between 0.001 and 3
        setScaleY(newScaleY);
        if (canvas && activeObject) {
            activeObject.scaleY = newScaleY;
            canvas.discardActiveObject();
            canvas.setActiveObject(activeObject);
            canvas.renderAll(); // Re-render the canvas
        }
    };

    const content = () => {
        return (
            <div className="grid grid-cols-2 items-center gap-1">
                {/* Scale X Input */}
                <div className="flex flex-col space-y-1">
                    <label className="text-xs font-medium">X: {scaleX.toFixed(3)}</label>
                    <Input
                        type="number"
                        step="0.010"
                        min="0.001"
                        value={scaleX}
                        onChange={(e) => {
                            const inputValue = parseFloat(e.target.value);
                            if (!isNaN(inputValue)) {
                                handleScaleXChange(inputValue);
                            }
                        }}
                    />
                </div>

                {/* Scale Y Input */}
                <div className="flex flex-col space-y-1">
                    <label className="text-xs font-medium">Y: {scaleY.toFixed(3)}</label>
                    <Input
                        type="number"
                        step="0.010"
                        min="0.001"
                        value={scaleY}
                        onChange={(e) => {
                            const inputValue = parseFloat(e.target.value);
                            if (!isNaN(inputValue)) {
                                handleScaleYChange(inputValue);
                            }
                        }}
                    />
                </div>
            </div>
        )
    }

    return (
        <Card className="grid items-center gap-2 p-2">
            <CollapsibleComponent text={"Scale Control"}>
                {content()}
            </CollapsibleComponent>
        </Card>
    );
};

export default ScaleObjects;