import { startCamera, grabFrame } from './camera.js';
import { decodeBarcodes } from './barcode.js';

const app = document.querySelector('#app');
app.innerHTML = `
  <video id="v" style="width:100%"></video>
  <button id="b" style="min-height:56px;width:100%">Bild aufnehmen</button>
  <pre id="out"></pre>
`;

const video = document.querySelector('#v');
const out = document.querySelector('#out');

startCamera(video)
  .then(() => { out.textContent = 'Kamera laeuft'; })
  .catch((error) => { out.textContent = `Kamera nicht verfuegbar: ${error.message}`; });

document.querySelector('#b').addEventListener('click', async () => {
  try {
    // grabFrame wirft, wenn das Kamerabild noch nicht bereit ist (siehe
    // camera.js) - dieser Fall wird hier abgefangen und sichtbar gemacht,
    // statt unbehandelt zu verpuffen.
    const frame = grabFrame(video);
    const codes = await decodeBarcodes(frame);
    out.textContent = codes.length ? codes.join('\n') : 'kein Barcode gefunden';
  } catch (error) {
    out.textContent = `Fehler: ${error.message}`;
  }
});