import { useState } from 'react';
import { Annotator, Annotation } from 'react-picture-annotate';

const MyComponent = () => {
  const [annotations, setAnnotations] = useState<Annotation[]>([]);
  const classes = ['cat', 'dog', 'person'];
  const imageUrl = '[https://i.imgur.com/3o1fB3M.jpeg](https://i.imgur.com/3o1fB3M.jpeg)'; // Example image URL

  const handleSave = (newAnnotations: Annotation[]) => {
    console.log('Saved annotations:', newAnnotations);
    setAnnotations(newAnnotations);
  };

  return (
    <div style={{ width: '80%', margin: 'auto' }}>
      <Annotator
        imageUrl={imageUrl}
        classes={classes}
        onSave={handleSave}
        onCancel={() => console.log('Annotation cancelled')}
      />
    </div>
  );
};

const handleSave = (annotations: Annotation[]) => {
  // Get image dimensions (you would have these in your app)
  const imageWidth = 1280;
  const imageHeight = 720;
  
  const yoloData = annotations.map(ann => {
    const classId = classes.findIndex(c => c === ann.label); // Convert label string to class index
    const [x, y, w, h] = ann.box;

    // Convert pixel values to normalized YOLO format
    const x_center = (x + w / 2) / imageWidth;
    const y_center = (y + h / 2) / imageHeight;
    const width = w / imageWidth;
    const height = h / imageHeight;

    return `${classId} ${x_center} ${y_center} ${width} ${height}`;
  }).join('\n');

  console.log("Converted to YOLO format:", yoloData);
  // Now, you can save this string to a .txt file.
};