import "react-pdf-highlighter-plus/style/style.css";

import {
  PdfLoader,
  PdfHighlighter,
  TextHighlight,
  AreaHighlight,
  useHighlightContainerContext,
} from "react-pdf-highlighter-plus";
import "react-pdf-highlighter-plus/style/style.css";

function App() {
  const [highlights, setHighlights] = useState([]);

  return (
    <PdfLoader document="https://example.com/document.pdf">
      {(pdfDocument) => (
        <PdfHighlighter
          pdfDocument={pdfDocument}
          highlights={highlights}
          enableAreaSelection={(e) => e.altKey}
        >
          <HighlightContainer />
        </PdfHighlighter>
      )}
    </PdfLoader>
  );
}

function HighlightContainer() {
  const { highlight, isScrolledTo } = useHighlightContainerContext();

  return highlight.type === "text" ? (
    <TextHighlight highlight={highlight} isScrolledTo={isScrolledTo} />
  ) : (
    <AreaHighlight highlight={highlight} isScrolledTo={isScrolledTo} />
  );
}

<TextHighlight
  highlight={highlight}
  isScrolledTo={isScrolledTo}
  style={{ background: "rgba(255, 226, 143, 1)" }}
/>

<PdfHighlighter
  enableAreaSelection={(event) => event.altKey}
  // ...
>

import { FreetextHighlight } from "react-pdf-highlighter-plus";

<PdfHighlighter
  enableFreetextCreation={() => freetextMode}
  onFreetextClick={(position) => {
    addHighlight({ type: "freetext", position, content: { text: "Note" } });
  }}
>

// In your highlight container:
<FreetextHighlight
  highlight={highlight}
  onChange={handlePositionChange}
  onTextChange={handleTextChange}
  onStyleChange={handleStyleChange}
  color="#333333"
  backgroundColor="#ffffc8"
  fontSize="14px"
/>

import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-plus";

// Signature pad modal
<SignaturePad
  isOpen={isOpen}
  onComplete={(dataUrl) => setPendingImage(dataUrl)}
  onClose={() => setIsOpen(false)}
/>

// In your highlight container:
<ImageHighlight
  highlight={highlight}
  onChange={handlePositionChange}
  onEditStart={() => toggleEditInProgress(true)}
  onEditEnd={() => toggleEditInProgress(false)}
/>

import { DrawingHighlight } from "react-pdf-highlighter-plus";

<PdfHighlighter
  enableDrawingMode={drawingMode}
  onDrawingComplete={(dataUrl, position, strokes) => {
    addHighlight({ type: "drawing", position, content: { image: dataUrl } });
  }}
  drawingStrokeColor="#ff0000"
  drawingStrokeWidth={2}
>

// In your highlight container:
<DrawingHighlight
  highlight={highlight}
  onChange={handlePositionChange}
/>

<PdfHighlighter
  enableShapeMode={shapeMode} // "rectangle" | "circle" | "arrow" | null
  onShapeComplete={(position, shape) => {
    addHighlight({ type: "shape", position, content: { shape } });
  }}
  shapeStrokeColor="#000000"
  shapeStrokeWidth={2}
>
  <HighlightContainer />
</PdfHighlighter>

const highlighterUtilsRef = useRef<PdfHighlighterUtils>();

<PdfHighlighter
  pdfDocument={pdfDocument}
  highlights={highlights}
  utilsRef={(utils) => (highlighterUtilsRef.current = utils)}
>
  <HighlightContainer />
</PdfHighlighter>

highlighterUtilsRef.current?.search("TypeScript", {
  highlightAll: true,
  caseSensitive: false,
});
highlighterUtilsRef.current?.findNext();
highlighterUtilsRef.current?.clearSearch();

// Enable dark mode (warm-gray default palette)
<PdfHighlighter
  pdfDocument={pdfDocument}
  theme={{ mode: "dark" }}
  highlights={highlights}
>
  <HighlightContainer />
</PdfHighlighter>

// Customize the dark palette
<PdfHighlighter
  pdfDocument={pdfDocument}
  theme={{
    mode: "dark",
    darkModeColors: {
      background: "#141210", // replaces white paper
      foreground: "#eae6e0", // replaces black text / line-art
    },
    containerBackgroundColor: "#3a3a3a",
    scrollbarThumbColor: "#6b6b6b",
    scrollbarTrackColor: "#2c2c2c",
  }}
  highlights={highlights}
>
  <HighlightContainer />
</PdfHighlighter>

<PdfLoader
  document="https://api.example.com/files/report.pdf"
  // Fetch only the pages needed to render first (needs server HTTP range support)
  disableAutoFetch={true}
  // Auth / cross-origin
  httpHeaders={{ Authorization: `Bearer ${token}` }}
  withCredentials={false}
  // Reuse the same URL instantly on remount / re-open (default true)
  enableCache={true}
>
  {(pdfDocument) => <PdfHighlighter pdfDocument={pdfDocument} /* … */ />}
</PdfLoader>

<PdfHighlighter
  pdfDocument={pdfDocument}
  initialPage={12}                         // jump here on first load (deep-link)
  onPageChange={(page) => syncUrl(page)}    // current page changed
  onZoomChange={(scale) => setZoom(scale)}  // pinch / ctrl+wheel zoom changed
  highlights={highlights}
>
  <HighlightContainer />
</PdfHighlighter>

import { getTextPosition } from "react-pdf-highlighter-plus";

const match = await getTextPosition(pdfDocument, "the exact or near-exact quote");
if (match) {
  const citation = {
    id: "cite-1",
    type: "text",
    content: { text: match.matchedText },
    position: match.position,   // precise rects, page-independent
  };
  setHighlights((prev) => [citation, ...prev]);
  utils.scrollToHighlight(citation); // smooth scroll + flash
}
// match: { position, pageNumber, matchedText, confidence: "exact" | "fuzzy" }

import { extractSentences } from "react-pdf-highlighter-plus";

// 1. Build the ordered script once.
const sentences = (
  await extractSentences(pdfDocument, { includePositions: true })
).filter((s) => s.position);

// 2. Speak each sentence; highlight + scroll as it starts.
function readFrom(index: number) {
  const s = sentences[index];
  if (!s) return;

  const reading = {
    id: "reading",
    type: "text",
    content: { text: s.text },
    position: s.position!,
  };
  setHighlights((prev) => [reading, ...prev.filter((h) => h.id !== "reading")]);
  utils.scrollToHighlight(reading); // smooth follow

  const utter = new SpeechSynthesisUtterance(s.text);
  utter.onend = () => readFrom(index + 1); // advance
  speechSynthesis.speak(utter);
}

readFrom(0);

import { exportPdf } from "react-pdf-highlighter-plus";

const handleExport = async () => {
  const pdfBytes = await exportPdf(pdfUrl, highlights, {
    textHighlightColor: "rgba(255, 226, 143, 0.5)",
    areaHighlightColor: "rgba(255, 226, 143, 0.5)",
    onProgress: (current, total) => console.log(`${current}/${total} pages`),
  });

  // Download the file
  const blob = new Blob([pdfBytes], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "annotated.pdf";
  a.click();
  URL.revokeObjectURL(url);
};

// Converting between systems
const { viewportToScaled } = useHighlightContainerContext();

// Save position (viewport → scaled)
const scaledPosition = viewportToScaled(boundingRect);

// Highlights are automatically converted to viewport when rendering

interface MyHighlight extends Highlight {
  category: string;
  comment?: string;
  author?: string;
}

// Use the generic type
const { highlight } = useHighlightContainerContext<MyHighlight>();

// Via props
<TextHighlight
  highlight={highlight}
  style={{ background: categoryColors[highlight.category] }}
/>

// Via CSS classes
.TextHighlight { }
.AreaHighlight { }
.FreetextHighlight { }
.ImageHighlight { }
.DrawingHighlight { }

import { MonitoredHighlightContainer } from "react-pdf-highlighter-plus";

<MonitoredHighlightContainer
  highlightTip={{
    position: highlight.position,
    content: <MyPopup highlight={highlight} />,
  }}
>
  <TextHighlight highlight={highlight} />
</MonitoredHighlightContainer>