import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
import { NativeAudio } from '@ionic-native/native-audio/ngx';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  scanning: boolean;
  scanSub: any;

  constructor(public navCtrl: NavController, private qrScanner: QRScanner, private nativeAudio: NativeAudio) {
    this.nativeAudio.preloadSimple('beep', 'assets/audio/beep.mp3');
    this.scanQRCode();
  }

  scanQRCode() {
    this.qrScanner.prepare().then((status: QRScannerStatus) => {
      if (status.authorized) {
        this.qrScanner.show();
        this.scanning = true;
        window.document.querySelector('.app-root').classList.add('transparentBody');
        this.scanSub = this.qrScanner.scan().subscribe((text: string) => { this.resultado(text) });
      }
    }).catch((e: any) => {
      // console.log('Error is', e);
    });
  }

  resultado (text) {
    this.nativeAudio.play('beep');
    this.scanSub.unsubscribe();
    console.log(text);
    let timer = 1;
    let intervalId = setInterval(() => {
      if(timer == 0) {
        clearInterval(intervalId);
        this.scanSub = this.qrScanner.scan().subscribe((text: string) => { this.resultado(text) });
      }
      timer = timer - 1;
    }, 1000);
  }

  closeScanner() {
    this.scanning = false;
    this.scanSub.unsubscribe();
    let app_root = window.document.querySelector('.app-root');
    if (app_root) {
      app_root.classList.remove('transparentBody');
    }
    this.qrScanner.hide();
    this.qrScanner.destroy();
  }

}

<ion-content [ngClass]="{'transparentBody': scanning}">
    <ng-container *ngIf="scanning === true">
        <div class="qrcode-container" [style.height]="'100vh'">
        </div>
    </ng-container>
</ion-content>

.transparentBody {
    background: transparent !important;
    background-color: transparent !important;
}