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

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

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

    const isMask = obj.isMask || false;
    const showGuide = obj.showMaskGuide !== false;
    const baseRadius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
    const abstractScale = 0.85;
    const radius = baseRadius * abstractScale;
    const innerRadius = radius * 0.5;
    
    const actualStrokeWidth = obj.strokeWidth ?? 0;
    const hasStroke = actualStrokeWidth > 0;
    
    // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
    const displayStroke = isSelected
        ? (hasStroke ? obj.stroke : "#3b82f6")
        : (isMask && showGuide)
            ? "#ff6b6b"
            : (isMask && !showGuide)
                ? "transparent"
                : (hasStroke ? obj.stroke : undefined);
    
    const displayStrokeWidth = isSelected
        ? (hasStroke ? actualStrokeWidth : 3)
        : (isMask && showGuide ? 2 : actualStrokeWidth);

    return (
        <Star
            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}
            numPoints={5}
            innerRadius={innerRadius}
            outerRadius={radius}
            fill={isMask ? "transparent" : obj.fill}
            stroke={displayStroke}
            strokeWidth={displayStrokeWidth}
            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 AbstractShape;