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

const LineShape = ({ obj, onSelect, onUpdate, draggable }: ShapeProps) => {
    const shapeRef = useRef<Konva.Line>(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;

    return (
        <Line
            ref={shapeRef}
            x={startX}
            y={startY}
            points={[0, 0, endX - startX, endY - startY]}
            stroke={obj.stroke || "#000000"}
            strokeWidth={actualStrokeWidth}
            hitStrokeWidth={20}
            perfectDrawEnabled={false}
            rotation={obj.rotation || 0}
            opacity={(obj.opacity ?? 100) / 100}
            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 LineShape;