import * as GraphicsModule from "../../modules/graphics";
import { useState } from "react";


export function LabelingOverlay(props: { graphicsLibrary: GraphicsModule.GraphicsLibrary, viewport: GraphicsModule.ChromatinViewport }): JSX.Element {

    const [layoutGenerator, setLayoutGenerator] = useState<GraphicsModule.LabelLayoutGenerator>(() => new GraphicsModule.LabelLayoutGenerator(props.viewport, props.graphicsLibrary));
    const [labels, setLabels] = useState<GraphicsModule.Label[]>(Array.from({ length: 100 }, (_, index) => ({ id: index, x: GraphicsModule.getRandomInt(800), y: GraphicsModule.getRandomInt(600), text: "Label " + index })));

    return (<svg style={{ width: '100%', height: '100%', overflow: 'hidden', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none' }}>
        {labels.map(({ id, x, y, text }: GraphicsModule.Label) => (<text key={id} x={x} y={y} fontSize={18} fill='white'>{text}</text>))}
    </svg>);
}