ui/src/components/Detection.js

import React from 'react';

function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
    if (!detection || !detection.class) {
        return null;
    }

    const { Color: color } = detection.class;

    if (!color) {
        console.error("Color is undefined for detection class:", detection.class);
        return null;
    }

    // Use startsWith to correctly handle RGBA and hex colors
    const backgroundColor = color.startsWith('rgba')
        ? color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, 'rgba($1, $2, $3, 0.4)')
        : color.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/, 'rgba($1, $2, $3, 0.4)');

    const borderColor = color.startsWith('rgba')
        ? color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, 'rgba($1, $2, $3, 1)')
        : color;

    const resizeHandleSize = 8;

    const resizeHandles = [
        { position: 'top-left', cursor: 'nwse-resize',  x: -resizeHandleSize, y: -resizeHandleSize, },
        { position: 'top-right', cursor: 'nesw-resize', x: detection.x2 - detection.x1 , y: -resizeHandleSize,},
        { position: 'bottom-left', cursor: 'nesw-resize', x: -resizeHandleSize, y: detection.y2 - detection.y1, },
        { position: 'bottom-right', cursor: 'nwse-resize', x: detection.x2 - detection.x1, y: detection.y2 - detection.y1 , },
        { position: 'top-middle', cursor: 'ns-resize', x: (detection.x2 - detection.x1) / 2 - resizeHandleSize / 2, y: -resizeHandleSize },
        { position: 'bottom-middle', cursor: 'ns-resize', x: (detection.x2 - detection.x1) / 2 - resizeHandleSize / 2, y: detection.y2 - detection.y1 },
        { position: 'left-middle', cursor: 'ew-resize', x: -resizeHandleSize, y: (detection.y2 - detection.y1) / 2 - resizeHandleSize / 2 },
        { position: 'right-middle', cursor: 'ew-resize', x: detection.x2 - detection.x1, y: (detection.y2 - detection.y1) / 2 - resizeHandleSize / 2 },
    ];

    const style = {
        position: 'absolute',
        left: `${detection.x1}px`,
        top: `${detection.y1}px`,
        width: `${detection.x2 - detection.x1}px`,
        height: `${detection.y2 - detection.y1}px`,
        backgroundColor: backgroundColor,
        border: `2px solid ${borderColor}`,
        boxSizing: 'border-box',
        cursor: isSelected ? 'move' : 'default',
        pointerEvents: 'auto',
        zIndex: isSelected ? 2 : 1,
    };

    if (isSelected) {
        style.border = `3px solid black`;
        style.boxShadow = `0 0 4px 2px ${borderColor}`;
    }

    const handleMouseDown = (e) => {
        e.stopPropagation();
        onDetectionMouseDown(e);
    };

    const handleResizeMouseDown = (e, position) => {
        e.stopPropagation();
        e.preventDefault();
        onResize(e, position);
    };

    return (
        <div style={style} onMouseDown={handleMouseDown}>
            {isSelected && resizeHandles.map((handle) => (
                <div
                    key={handle.position}
                    style={{
                        position: 'absolute',
                        left: `${handle.x}px`,
                        top: `${handle.y}px`,
                        width: `${resizeHandleSize}px`,
                        height: `${resizeHandleSize}px`,
                        backgroundColor: 'black',
                        cursor: handle.cursor,
                        pointerEvents: 'auto',
                        zIndex: 3,
                    }}
                    onMouseDown={(e) => handleResizeMouseDown(e, handle.position)}
                />
            ))}
            <span style={{
                color: 'white',
                fontSize: '12px',
                position: "absolute",
                top: "-18px",
                left: "0px",
                textShadow: '1px 1px 2px black',
                pointerEvents: 'none'
            }}>
                {detection.class.Name}
            </span>
        </div>
    );
}

export default Detection;