import { NativeContainerService } from './../../../../../../../libs/shared/src/lib/barcode-scanner/native-container.service';
import { Component, OnInit, HostListener } from '@angular/core';
import { Observable, fromEvent, merge, of } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Component({
  selector: 'app-testing-container',
  template: `
    <h5>Connection status: {{ connectionStatus$ | async }}</h5>
    <app-button (click)="createEvent()">TEST EVENT</app-button>
    <br />
    <pre>{{ event }}</pre>
  `,
})
export class TestingContainerComponent implements OnInit {
  public event = {};
  public connectionStatus$: Observable<string>;
  constructor(private native: NativeContainerService) {}

  ngOnInit() {
    const online$ = fromEvent(window, 'online');
    const offline$ = fromEvent(window, 'offline');
    this.connectionStatus$ = merge(of('INIT'), online$.pipe(mapTo('CONNECTED!')), offline$.pipe(mapTo('DIS-CONNECTED!')));
  }

  createEvent() {
    this.native.openScanner().subscribe((data) => {
      // this.event += '\n' + JSON.stringify(data);
    });

    this.native.windowMessages.subscribe((data) => {
      this.event += '\n' + JSON.stringify(data);
    });
  }
}
