import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
// import { fromEvent } from 'rxjs/observable/fromEvent';
import { fromEvent } from 'rxjs/';
import { mergeMap, takeUntil, switchMap } from 'rxjs/operators';
// import { PaintService } from './paint.service';



@Component({
  selector: 'app-confirm-order',
  templateUrl: './confirm-order.component.html',
  styleUrls: ['./confirm-order.component.css']
})
export class ConfirmOrderComponent implements OnInit {

  public formGroup: FormGroup;
  public imagen: any = null;

  constructor(
    // private paintSvc: PaintService, private elRef: ElementRef
  ) {
    this.formGroup = this.createFromGroup();
  }

  ngOnInit(): void {
  }

  // Creación de formulario de registro de módulos
  private createFromGroup(): FormGroup {
    return new FormGroup({
      descripcion: new FormControl('000000001', Validators.required),
    });
  }

  public getErrorMessage() {
    if (this.descripcion?.hasError('required')) {
      return 'You must enter a value';
    }
    return ''
  }

  // Ejecuta el input file
  public getFile() {
    document.getElementById("upfile")!!.click();
  }

  // Método para cargar la imagen 
  public loadImg(obj: any, event: any) {
    this.imagen = event.target.files[0];
    var file = obj.value;
  }

  /* private startPainting() {
    // const { nativeElement } = this.elRef;
    const canvas = nativeElement.querySelector('canvas') as HTMLCanvasElement
    const move$ = fromEvent<MouseEvent>(canvas, 'mousemove')
    const down$ = fromEvent<MouseEvent>(canvas, 'mousedown')
    const up$ = fromEvent<MouseEvent>(canvas, 'mouseup')
    const paints$ = down$.pipe(
      mergeMap(down => move$.pipe(takeUntil(up$)))
      // mergeMap(down => move$)
    );

    down$.subscribe(console.info)

    const offset = getOffset(canvas)

    paints$.subscribe((event) => {
      const clientX = event.clientX - offset.left
      const clientY = event.clientY - offset.top
      this.paintSvc.paint({ clientX, clientY })
    });
  } */

  get descripcion() { return this.formGroup.get('descripcion'); }

}

function getOffset(el: HTMLElement) {
  const rect = el.getBoundingClientRect();

  return {
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
  }
}