import { BarcodeDetector } from "barcode-detector/ponyfill";

const barcodeReaderSetup = async function () {
  const supportedFormats = await BarcodeDetector.getSupportedFormats();

  return new BarcodeDetector({
    // make sure the formats are supported
    formats: supportedFormats,
  });
}

export default {
  async mounted() {
    const detectedBarcodes = new Set([]);
    const barcodeDetector = await barcodeReaderSetup();
    this.cameraPreview = this.el.querySelector("#camera-preview");
    const constraints = {
      audio: false,
      video: {
        width: 800, height: 600, facingMode: {
          ideal: "environment"
        }
      },
    };
    this.el.addEventListener("camera_request", () => {
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((mediaStream) => {
          console.debug("Camera access allowed")
          this.pushEventTo(this.cameraPreview, "camera_allowed", {});
          this.cameraPreview.srcObject = mediaStream;
          this.cameraPreview.onloadedmetadata = () => {
            this.cameraPreview.play();
            this.scanInterval = window.setInterval(async () => {
              const barcodes = await barcodeDetector.detect(this.cameraPreview);
              if (barcodes.length <= 0) return;

              barcodes.forEach(barcode => {
                if (!detectedBarcodes.has(barcode.rawValue)) {
                  this.pushEventTo(this.cameraPreview, "barcode_scanned", { number: barcode.rawValue });
                  detectedBarcodes.add(barcode.rawValue);
                };
              });
            }, 500)
          };
        })
        .catch((err) => {
          console.error(`${err.name}: ${err.message}`);
          this.pushEventTo(this.cameraPreview, "camera_denied", {});
        });
    })

  },
  destroyed() {
    this.cameraPreview.srcObject.getTracks().forEach(track => track.stop());
    window.clearInterval(this.scanInterval);
  }
}