import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { useContext, useState, useEffect } from 'react'

const RotateCustomization = () => {
    const { canvas } = useContext(CanvasContext);
    const { activeObject } = useContext(ActiveObjectContext);

    const [rotationAngle, setRotationAngle] = useState(0);

    useEffect(() => {
        if (activeObject) {
            setRotationAngle(activeObject?.angle)
        }
    }, [activeObject])

    const handleRotation = (e) => {
        activeObject.set({ angle: e });
        setRotationAngle(e);
        canvas.remove(activeObject);
        canvas.add(activeObject);
        canvas.setActiveObject(activeObject);
        canvas.renderAll();
    }

    return (
        <div className="grid gap-2 pb-1">
            <Label className="">Rotation Angle: {rotationAngle}°</Label>
            <Slider
                min={0}
                max={360}
                step={1}
                value={[rotationAngle]}
                onValueChange={(value) =>
                    handleRotation(value[0])
                }
            />
        </div>
    );
};

export default RotateCustomization