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

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

    useEffect(() => {
        if (isSelected && shapeRef.current && transformerRef.current) {
            transformerRef.current.nodes([shapeRef.current]);
            transformerRef.current.getLayer()?.batchDraw();
        }
    }, [isSelected, transformerRef]);

    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;

    return (
        <Star
            ref={shapeRef}
            x={obj.x + (obj.width || 100) / 2}
            y={obj.y + (obj.height || 100) / 2}
            numPoints={5}
            innerRadius={innerRadius}
            outerRadius={radius}
            fill={obj.fill}
            stroke={isSelected ? "#3b82f6" : obj.stroke}
            strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
            rotation={obj.rotation || 0}
            draggable={draggable}
            onClick={() => {
                if (shapeRef.current) {
                    onSelect(obj.id, shapeRef.current);
                }
            }}
            onDragEnd={(e) => {
                const node = e.target;
                onUpdate(obj.id, {
                    x: node.x() - (obj.width || 100) / 2,
                    y: node.y() - (obj.height || 100) / 2,
                });
            }}
            onTransformEnd={() => {
                const node = shapeRef.current;
                if (!node) return;

                const scaleX = node.scaleX();
                const scaleY = node.scaleY();

                node.scaleX(1);
                node.scaleY(1);

                const newRadius = Math.max(5, baseRadius * Math.min(scaleX, scaleY));
                const newSize = newRadius * 2;
                onUpdate(obj.id, {
                    x: node.x() - newSize / 2,
                    y: node.y() - newSize / 2,
                    rotation: node.rotation(),
                    width: newSize,
                    height: newSize,
                });
            }}
        />
    );
};

export default AbstractShape;