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

const getFontWeight = (fontWeight?: string): string => {
    const weightMap: Record<string, string> = {
        bold: "bold",
        normal: "normal",
        "300": "300",
    };
    return weightMap[fontWeight || "normal"] || "normal";
};

const LinkShape = ({
    obj,
    onSelect,
    onUpdate,
    draggable,
}: ShapeProps) => {
    const shapeRef = useRef<Konva.Text>(null);
    const fontWeight = useMemo(() => getFontWeight(obj.fontWeight), [obj.fontWeight]);

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

    return (
        <Text
            ref={shapeRef}
            x={obj.x}
            y={obj.y}
            text={obj.text || obj.linkUrl || ""}
            fontSize={obj.fontSize || 24}
            fill={obj.fill || "#0000ff"}
            fontFamily="irancell"
            fontStyle={fontWeight}
            underline={true}
            rotation={obj.rotation || 0}
            draggable={draggable}
            onClick={(e) => {
                // در حالت editor، لینک‌ها قابل کلیک نیستند
                // این قابلیت در viewer اضافه خواهد شد
                if (shapeRef.current) {
                    onSelect(obj.id, shapeRef.current, e);
                }
            }}
            onDragEnd={(e) => {
                const node = e.target;
                onUpdate(obj.id, {
                    x: node.x(),
                    y: node.y(),
                });
            }}
        />
    );
};

export default LinkShape;