import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';
import { useContext, useEffect, useState } from 'react';
import { Lock, Unlock } from "lucide-react";
import { Card } from '@/components/ui/card';

const LockObject = () => {
    const { canvas } = useContext(CanvasContext);
    const { activeObject } = useContext(ActiveObjectContext);
    const [isLocked, setIsLocked] = useState(false);
    const { toast } = useToast();

    useEffect(() => {
        if (activeObject?.lockMovementX === false) {
            setIsLocked(false);
        }
        else {
            setIsLocked(true);
        }
    }, [activeObject])

    const toggleLock = () => {
        if (!canvas || !activeObject) {
            toast({
                title: "No object selected",
                description: "Please select an object to lock or unlock.",
                variant: "destructive",
            })
            return;
        }

        const newLockState = !activeObject.lockMovementX;
        activeObject.set({
            lockMovementX: newLockState,
            lockMovementY: newLockState,
            lockRotation: newLockState,
            lockScalingX: newLockState,
            lockScalingY: newLockState,
        });

        setIsLocked(newLockState);
        canvas.requestRenderAll();

        toast({
            title: newLockState ? "Object locked" : "Object unlocked",
            description: newLockState ? "The object is now locked in place." : "The object can now be moved and resized.",
        })
    }

    return (
        <Card className="p-2">
            <h2 className='font-bold'>{!isLocked ? "Lock" : "Unlock"} Object</h2>
            <Button
                onClick={toggleLock}
                variant="outline"
                size="icon"
                disabled={!activeObject}
                title={isLocked ? "Unlock object" : "Lock object"}
            >
                {isLocked ? <Unlock className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
            </Button>
        </Card>
    )
}

export default LockObject