import { useRef } from "react";
import { Image as KonvaImage } from "react-konva";
import Konva from "konva";
import useImage from "use-image";
import type { ShapeProps } from "./types";

const ImageObject = ({
    obj,
    isSelected,
    onSelect,
    onUpdate,
    draggable,
}: ShapeProps) => {
    const [image] = useImage(obj.imageUrl || "");
    const shapeRef = useRef<Konva.Image>(null);

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

    if (!image) return null;

    return (
        <KonvaImage
            ref={shapeRef}
            id={obj.id}
            x={obj.x}
            y={obj.y}
            image={image}
            width={obj.width || image.width}
            height={obj.height || image.height}
            // اگر draggable=false باشد، یعنی mask اعمال شده و نباید stroke نمایش داده شود (Group stroke دارد)
            stroke={isSelected && draggable ? "#3b82f6" : undefined}
            strokeWidth={isSelected && draggable ? 3 : 0}
            rotation={obj.rotation || 0}
            draggable={draggable}
            onClick={draggable ? (e) => {
                // فقط وقتی mask اعمال نشده onClick handler را فعال کن
                if (shapeRef.current) {
                    onSelect(obj.id, shapeRef.current, e);
                }
            } : undefined}
            onDragEnd={(e) => {
                const node = e.target;
                onUpdate(obj.id, {
                    x: node.x(),
                    y: node.y(),
                });
            }}
            onTransformEnd={() => {
                const node = shapeRef.current;
                if (!node) return;

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

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

                onUpdate(obj.id, {
                    x: node.x(),
                    y: node.y(),
                    rotation: node.rotation(),
                    width: Math.max(5, (obj.width || image.width) * scaleX),
                    height: Math.max(5, (obj.height || image.height) * scaleY),
                });
            }}
        />
    );
};

export default ImageObject;