import { useRef, useEffect } from "react";
import { Arrow } from "react-konva";
import Konva from "konva";
import type { ShapeProps } from "./types";

const ArrowShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
    const shapeRef = useRef<Konva.Arrow>(null);

    // Transformer is managed in EditorCanvas for multi-select support

    const startX = obj.x;
    const startY = obj.y;
    const endX = obj.width || 0;
    const endY = obj.height || 0;

    const actualStrokeWidth = obj.strokeWidth ?? 2;
    const actualStroke = obj.stroke || "#000000";

    // اگر انتخاب شده و strokeWidth = 0 است، ضخامت را 3 کن تا مشخص باشد
    const displayStrokeWidth = isSelected && actualStrokeWidth === 0 ? 3 : actualStrokeWidth;

    // به‌روزرسانی رنگ و ضخامت به‌صورت لایو
    useEffect(() => {
        if (shapeRef.current) {
            shapeRef.current.stroke(actualStroke);
            shapeRef.current.fill(actualStroke);
            shapeRef.current.strokeWidth(displayStrokeWidth);
            shapeRef.current.getLayer()?.batchDraw();
        }
    }, [actualStroke, displayStrokeWidth, obj.stroke, obj.strokeWidth, isSelected]);

    return (
        <Arrow
            ref={shapeRef}
            id={obj.id}
            x={startX}
            y={startY}
            points={[0, 0, endX - startX, endY - startY]}
            stroke={actualStroke}
            strokeWidth={displayStrokeWidth}
            fill={actualStroke}
            hitStrokeWidth={20}
            perfectDrawEnabled={false}
            rotation={obj.rotation || 0}
            draggable={draggable}
            onClick={(e) => {
                if (shapeRef.current) {
                    onSelect(obj.id, shapeRef.current, e);
                }
            }}
            onDragEnd={(e) => {
                const node = e.target;
                const newX = node.x();
                const newY = node.y();
                const dx = endX - startX;
                const dy = endY - startY;

                onUpdate(obj.id, {
                    x: newX,
                    y: newY,
                    width: newX + dx,
                    height: newY + dy,
                });
            }}
        />
    );
};

export default ArrowShape;

