import React, { useState } from 'react';
import { PdfAnnotator, AnnotationMode } from 'pdf-annotator-react';

const MyPdfAnnotator = () => {
  const [annotations, setAnnotations] = useState([]);
  
  const handleAnnotationCreate = (newAnnotation) => {
    setAnnotations(prev => [...prev, newAnnotation]);
  };
  
  const handleAnnotationUpdate = (updatedAnnotation) => {
    setAnnotations(prev => 
      prev.map(a => a.id === updatedAnnotation.id ? updatedAnnotation : a)
    );
  };
  
  const handleAnnotationDelete = (annotationId) => {
    setAnnotations(prev => prev.filter(a => a.id !== annotationId));
  };
  
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <PdfAnnotator
        url="https://example.com/sample.pdf"
        annotations={annotations}
        onAnnotationCreate={handleAnnotationCreate}
        onAnnotationUpdate={handleAnnotationUpdate}
        onAnnotationDelete={handleAnnotationDelete}
        annotationMode={AnnotationMode.HIGHLIGHT}
      />
    </div>
  );
};

export default MyPdfAnnotator;

import React, { useState } from 'react';
import { PdfAnnotator, AnnotationMode } from 'pdf-annotator-react';

const MyPdfAnnotator = () => {
  const [annotations, setAnnotations] = useState([]);
  const [mode, setMode] = useState(AnnotationMode.NONE);
  
  // Custom categories with tags
  const customCategories = [
    {
      competencia: {
        id: 1,
        displayName: "Grammar",
        color: "#FF5733"
      },
      tags: [
        { id: 1, name: "Verb Tense" },
        { id: 2, name: "Agreement" }
      ]
    },
    {
      competencia: {
        id: 2,
        displayName: "Style",
        color: "#33FF57"
      },
      tags: [
        { id: 3, name: "Clarity" },
        { id: 4, name: "Conciseness" }
      ]
    }
  ];
  
  // Annotation event handlers
  const handleAnnotationsChange = (newAnnotations) => {
    setAnnotations(newAnnotations);
  };
  
  const handleAnnotationSelect = (selectedAnnotation) => {
    console.log('Selected annotation:', selectedAnnotation);
  };
  
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <PdfAnnotator
        url="https://example.com/sample.pdf"
        annotations={annotations}
        onAnnotationsChange={handleAnnotationsChange}
        onAnnotationSelect={handleAnnotationSelect}
        annotationMode={mode}
        onAnnotationModeChange={setMode}
        // Custom settings
        customCategories={customCategories}
        defaultThickness={2}
        fitToWidth={true}
        toolbarPosition="top"
        viewOnly={false}
        viewerOnly={false}
        // Custom colors
        highlightColor="rgba(255, 230, 0, 0.4)"
        underlineColor="rgba(0, 100, 255, 0.7)"
        rectangleColor="rgba(255, 0, 0, 0.3)"
        drawingColor="#22cc22"
        pinColor="rgba(249, 115, 22, 0.7)"
      />
    </div>
  );
};

export default MyPdfAnnotator;