import { Component, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { WebcamComponent, WebcamImage } from 'ngx-webcam';
import { Observable, Subject } from 'rxjs';
import { HenselTranslateService } from '../../services/localization/hensel-translate.service';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'hensel-webcam',
  templateUrl: 'hensel-webcam.component.html',
  styleUrls: ['hensel-webcam.component.scss'],
})

export class HenselWebcamComponent implements OnDestroy {
  @ViewChild(WebcamComponent) webCam: WebcamComponent;
  @Output() public pictureTaken = new EventEmitter();
  @Input() public picture: string;
  @Input() public canDelete: boolean = true;
  @Input() public disabled: boolean = false;
  @Input() public size: number = 250;


  public videoOptions: MediaTrackConstraints = {
    width: { ideal: this.size }, // must be same size
    height: { ideal: this.size }, // must be same size (look html)  TODO: Input width/height
  };

  public get isInitialized(): boolean {
    return this.webCam?.videoInitialized ?? false;
  }

  // webcam snapshot trigger
  private trigger: Subject<void> = new Subject<void>();


  constructor(
    public translate: HenselTranslateService,
  ) {}

  // tslint:disable-next-line:use-life-cycle-interface
  ngOnInit() {}

  public triggerSnapshot(): void {
    this.trigger.next();
  }


  public processSnapshot(webcamImage: WebcamImage): void {
    this.pictureTaken.emit(webcamImage);
  }

  public get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
  }


  ngOnDestroy(): void {
  }
}
