dpage-editor/src/pages/editor/components/canvas/useDrawingHandlers.ts

import { useState, useRef, useEffect } from "react";
import Konva from "konva";
import { useEditorStore, type EditorObject } from "@/pages/editor/store/editorStore";
import { useTextDefaultsStore } from "@/pages/editor/store/textDefaultsStore";
import { createDrawingObject } from "./drawingUtils";

export const useDrawingHandlers = () => {
    const [isDrawing, setIsDrawing] = useState(false);
    const [startPos, setStartPos] = useState({ x: 0, y: 0 });
    const [tempObject, setTempObject] = useState<EditorObject | null>(null);
    const transformerRef = useRef<Konva.Transformer>(null);

    const { tool, addObject, updateObject, setSelectedObjectId, selectedObjectId } = useEditorStore();
    const { defaults } = useTextDefaultsStore();

    useEffect(() => {
        setTempObject(null);
        setIsDrawing(false);
    }, [tool]);

    const clearSelection = () => {
        setSelectedObjectId(null);
        if (transformerRef.current) {
            transformerRef.current.nodes([]);
            transformerRef.current.getLayer()?.batchDraw();
        }
    };

    const handleStageMouseDown = (e: Konva.KonvaEventObject<MouseEvent>) => {
        const stage = e.target.getStage();
        if (!stage) return;

        const clickedOnEmpty = e.target === stage;

        if (clickedOnEmpty && selectedObjectId) {
            clearSelection();
            return;
        }

        if (tool === "select") {
            if (clickedOnEmpty) {
                clearSelection();
            }
            return;
        }

        if (selectedObjectId) {
            return;
        }

        const pointerPos = stage.getPointerPosition();
        if (!pointerPos) return;

        setIsDrawing(true);
        setStartPos(pointerPos);

        if (tool === "text") {
            const newText: EditorObject = {
                id: `text-${Date.now()}`,
                type: "text",
                x: pointerPos.x,
                y: pointerPos.y,
                text: "متن جدید",
                fontSize: defaults.fontSize,
                fontFamily: defaults.fontFamily,
                fontWeight: defaults.fontWeight,
                fill: defaults.fill,
                opacity: defaults.opacity,
                letterSpacing: defaults.letterSpacing,
                wordSpacing: defaults.wordSpacing,
            };
            addObject(newText);
            setSelectedObjectId(newText.id);
        }
    };

    const handleStageMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {
        if (!isDrawing || tool === "select" || tool === "text") return;

        const stage = e.target.getStage();
        if (!stage) return;

        const pointerPos = stage.getPointerPosition();
        if (!pointerPos) return;

        const newObject = createDrawingObject({ tool, startPos, pointerPos, tempObject });
        if (!newObject) return;

        if (!tempObject) {
            addObject(newObject);
            setTempObject(newObject);
        } else {
            const updates: Partial<EditorObject> =
                tool === "circle"
                    ? { width: newObject.width, height: newObject.height }
                    : {
                          x: newObject.x,
                          y: newObject.y,
                          width: newObject.width,
                          height: newObject.height,
                      };
            updateObject(tempObject.id, updates);
        }
    };

    const handleStageMouseUp = () => {
        setIsDrawing(false);
        setTempObject(null);
    };

    return {
        isDrawing,
        transformerRef,
        handleStageMouseDown,
        handleStageMouseMove,
        handleStageMouseUp,
    };
};