import {AfterViewInit, Component, ElementRef, Inject, NgZone, OnDestroy, ViewChild} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import Cropper from 'cropperjs';
import {DataCropImage} from '../../../utils/models/data-crop-image';
import {UserMedia} from '@maplander/types';
import {Observable} from 'rxjs';

@Component({
  selector: 'lib-crop-image',
  templateUrl: './crop-image.component.html',
  styleUrls: ['./crop-image.component.scss']
})
export class CropImageComponent implements AfterViewInit, OnDestroy {
  @ViewChild('image', {static: true}) private _imageElement: ElementRef;
  private _cropper: Cropper;
  public load: boolean;
  public src: string;
  public circle: boolean;
  private readonly _result: UserMedia[];

  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: DataCropImage,
    private _dialogRef: MatDialogRef<CropImageComponent, UserMedia[]>,
    private _ngZone: NgZone
  ) {
    this.circle = false;
    this._result = [];
    this.load = true;
  }

  ngAfterViewInit(): void {
    this.circle = this._data.circle || false;
    this.validateFiles();
  }

  ngOnDestroy(): void {
    this._cropper.destroy();
  }

  zoom(out: boolean): void {
    this._cropper.zoom(out ? -1 : 1);
  }

  moveTo(action: 'up' | 'down' | 'right' | 'left'): void {
    switch (action) {
      case 'left':
        this._cropper.move(-10, 0);
        break;
      case 'right':
        this._cropper.move(10, 0);
        break;
      case 'up':
        this._cropper.move(0, -10);
        break;
      case 'down':
        this._cropper.move(0, 10);
        break;
    }
  }

  finishCrop(): void {
    this.load = true;
    setTimeout(() => {
      this.getUserMedia().subscribe(response => {
        this._ngZone.run(() => {
          this._result.push(response);
          this.validateFiles();
        });
      });
    }, 200);
  }

  cancelCrop(): void {
    this._dialogRef.close(null);
  }

  private validateFiles(): void {
    if (!Array.isArray(this._data.files)) {
      return this._dialogRef.close(null);
    }
    if (this._data.files.length > 0) {
      const file = this._data.files.splice(0, 1);
      this.readFile(file[0]);
    } else {
      this._dialogRef.close(this._result);
    }
  }

  private readFile(file: any): void {
    const fr = new FileReader();
    fr.addEventListener('load', (e: any) => {
      this._imageElement.nativeElement.src = e.target.result;
      this.init();
    });
    fr.readAsDataURL(file);
  }

  private init(): void {
    if (!this._cropper) {
      this._cropper = new Cropper(this._imageElement.nativeElement, {
        zoomable: true,
        scalable: false,
        aspectRatio: this._data.aspectRatio || 4 / 4,
        ready: () => {
          this.load = false;
        }
      });
    } else {
      this._cropper.replace(this._imageElement.nativeElement.src);
    }
  }

  private getUserMedia(): Observable<UserMedia> {
    return new Observable<UserMedia>(observer => {
      const canvas = this._cropper.getCroppedCanvas();
      const base = canvas.toDataURL('image/png');
      canvas.toBlob((blob) => {
        if (blob) {
          observer.next(new UserMedia(blob, base));
        } else {
          observer.error(null);
        }
        observer.complete();
      });
    });
  }
}