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

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

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

    const isMask = obj.isMask || false;
    const showGuide = obj.showMaskGuide !== false;
    const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);

    return (
        <RegularPolygon
            ref={shapeRef}
            id={obj.id}
            name={isMask ? "mask-shape" : "canvas-object"}
            x={obj.x + (obj.width || 100) / 2}
            y={obj.y + (obj.height || 100) / 2}
            sides={3}
            radius={radius}
            fill={isMask ? "transparent" : obj.fill}
            stroke={
                isSelected
                    ? "#3b82f6"
                    : (isMask && showGuide)
                        ? "#ff6b6b"
                        : (isMask && !showGuide)
                            ? "transparent"
                            : obj.stroke
            }
            strokeWidth={isSelected ? 3 : (isMask && showGuide ? 2 : (obj.strokeWidth ?? 0))}
            dash={isMask && showGuide ? [10, 5] : undefined}
            rotation={obj.rotation || 0}
            draggable={draggable}
            onClick={(e) => {
                if (shapeRef.current) {
                    onSelect(obj.id, shapeRef.current, e);
                }
            }}
            onDragMove={(e) => {
                const node = e.target;
                onUpdate(obj.id, {
                    x: node.x() - (obj.width || 100) / 2,
                    y: node.y() - (obj.height || 100) / 2,
                });
            }}
            onDragEnd={(e) => {
                const node = e.target;
                onUpdate(obj.id, {
                    x: node.x() - (obj.width || 100) / 2,
                    y: node.y() - (obj.height || 100) / 2,
                });
            }}
        />
    );
};

export default TriangleShape;