import { useEffect, useCallback, useContext } from 'react';
import CanvasContext from './Context/canvasContext/CanvasContext';
import ActiveObjectContext from './Context/activeObject/ObjectContext';
import OpenContext from './Context/openContext/OpenContext';
import CanvasSetting from './CanvasSetting';
import { EditPanel } from './EditPanel';
import ObjectPanel from './ObjectPanel';
import { AspectCanvas } from './AspectCanvas';

const Canvas = () => {
    const { canvas } = useContext(CanvasContext);

    const { openSetting, openObjectPanel, openPanel } = useContext(OpenContext);

    const { setActiveObject } = useContext(ActiveObjectContext);

    useEffect(() => {
        if (!canvas) return; // Ensure canvas is available

        // Event handler for mouse down
        const handleMouseDown = (event) => {
            const target = event.target; // Get the clicked target
            const activeObject = canvas.getActiveObject(); // Get the active object

            if (target) {
                if (target.type === 'group') {
                    setActiveObject(activeObject);
                } else {
                    setActiveObject(activeObject);
                }
            } else {
                setActiveObject(activeObject);
            }
        };

        // Attach the event listener
        canvas.on('mouse:down', handleMouseDown);

        // Cleanup function to remove the event listener
        return () => {
            canvas.off('mouse:down', handleMouseDown); // Remove the listener on unmount
        };
    }, [canvas]); // Re-run only when canvas changes


    const removeSelected = useCallback(() => {
        const activeObject = canvas?.getActiveObject();
        const allObjects = canvas?.getObjects();

        const textObjects = allObjects.filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text');

        if (activeObject) {
            canvas.remove(activeObject);
            setActiveObject(null);
        }
        if (activeObject && textObjects?.length === 1) {
            canvas.remove(activeObject);
            setActiveObject(null);
        }
        if (activeObject.length > 1) {
            canvas.remove(...activeObject);
            setActiveObject(null);
        }
    }, [canvas, setActiveObject]);

    useEffect(() => {
        const handleDeleteKey = (event) => {
            if (event.key === 'Delete') {
                removeSelected();
            }
        };
        window.addEventListener('keydown', handleDeleteKey);
        return () => {
            window.removeEventListener('keydown', handleDeleteKey);
        };
    }, [removeSelected]);

    return (
        <div className='flex flex-col items-center relative w-full h-full overflow-hidden'>

            {openSetting &&
                <CanvasSetting />
            }

            {
                openPanel &&
                <EditPanel />
            }

            {openObjectPanel && <ObjectPanel />}

            {/* Main canvas */}
            <AspectCanvas />
        </div>
    );
};

export default Canvas;