import { useRef } from 'react';
import { useCameraScanner } from '../lib/use-camera-scanner.js';
import { useScannerIdentification } from '../lib/use-scanner-identification.js';
import CameraScannerView from './CameraScannerView.js';

export default function CameraScanner({ onCardScanned, onError }) {
  const verificationPausedRef = useRef(false);
  const onVerifyCardRef = useRef(() => {});

  const camera = useCameraScanner({
    onError,
    verificationPausedRef,
    onVerifyCard: (card) => onVerifyCardRef.current(card),
  });

  const identification = useScannerIdentification({
    onCardScanned,
    onError,
    videoRef: camera.videoRef,
    canvasRef: camera.canvasRef,
    onVerifyCardRef,
    verificationPausedRef,
  });

  return (
    <CameraScannerView
      videoRef={camera.videoRef}
      canvasRef={camera.canvasRef}
      detectionCanvasRef={camera.detectionCanvasRef}
      isStreaming={camera.isStreaming}
      isDetecting={camera.isDetecting}
      trackedCards={camera.trackedCards}
      videoMetrics={camera.videoMetrics}
      startCamera={camera.startCamera}
      stopCamera={camera.stopCamera}
      scanNotice={identification.scanNotice}
      disambiguation={identification.disambiguation}
      submittingReview={identification.submittingReview}
      onPick={identification.handleDisambiguationPick}
      onNotInCatalog={identification.handleNotInCatalog}
      onCancelDisambiguation={identification.cancelDisambiguation}
    />
  );
}