import { Html5Qrcode, Html5QrcodeSupportedFormats } from "./html5-qrcode.min.js"

export class QrScanner {
  constructor(domId) {
    domId = domId || 'qr-container';
    this.el = document.getElementById(domId);
    if (!this.el) {
      this.el = createDom();
    }
    this.render_id = 'qr-reader';
    this.config = { fps: 4, qrbox: (width, height) => {return { width: width * 0.8, height: height * 0.9 }}};
    this.scanner = new Html5Qrcode(this.render_id, { });
    this.el.addEventListener('click', this.stop.bind(this)); 
    document.getElementById('qr-close').addEventListener('click', this.stop.bind(this));
  }

  start(title,onScanSuccess) {
    this.el.style.display = 'flex';
    document.getElementById('qr-title').innerText = title;
    const _onScanSuccess = (decodedText, decodedResult) => {
      onScanSuccess(decodedText);
    }
    const startScanner = () => {
      this.scanner.start({ facingMode: "environment" }, this.config, _onScanSuccess)
        .then((_) => {
          console.log('start scan');
        }, (e) => {
          console.log('scan error: ', e);
        });
    }
    startScanner();
  }

  stop() {
    if (this.scanner && this.scanner.getState() === 2){
      this.scanner.stop().then((_) => {
        console.log('stop scan')
      });
    }
    this.el.style.display = 'none';
  }
}
export function showQr(svgStr) {
  let el = document.getElementById('qr-container');
  if (!el) {
    el = createDom();
  }
  document.getElementById('qr-title').innerText = '';
  let container = document.getElementById('qr-reader');
  container.innerHTML = svgStr;
  el.style.display = 'flex';
}
function createDom() {
    addStyle(css);
    let container = document.createElement('div');
    container.id = 'qr-container';
    container.className = 'qr-container';
    let h2 = document.createElement('h2');
    h2.innerText = 'Scan QR Code';
    h2.id = 'qr-title';
    container.appendChild(h2);
    let div = document.createElement('div');
    div.id = 'qr-reader';
    div.className = 'qr-div';
    container.appendChild(div);
    let button = document.createElement('button');
    button.innerText = 'Close';
    button.id = 'qr-close';
    container.appendChild(button);
    document.body.appendChild(container);
    var closeMe = function(e) {
      if (e.target.id !== 'qr-container' && e.target.id !== 'qr-close') {
        return false;
      }
      container.style.display = 'none';
    }
    container.addEventListener('click', closeMe); 
    button.addEventListener('click', closeMe); 
    return container;
 }
const css = `
.qr-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
  background: #0000006b;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.qr-div {
  position: relative;
  padding: 0px;
  width: 500px;
}
`