import {Component, inject, input} from '@angular/core';
import {ImageCroppedEvent, ImageCropperComponent, LoadedImage} from 'ngx-image-cropper';
import {DomSanitizer, SafeUrl} from '@angular/platform-browser';
import {UserApiService} from '../user-api.service';
import {MAT_DIALOG_DATA, MatDialogContent} from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-cropp-image.component',
  imports: [
    ImageCropperComponent,
    MatDialogContent
  ],
  templateUrl: './dialog-cropp-image.component.html',
  styleUrl: './dialog-cropp-image.component.scss'
})
export class DialogCroppImageComponent {

  imageChangedEvent: Event | null = null;
  croppedImage: SafeUrl  = '';

  image?: string;
  imageCropUrl: string | undefined;

  constructor(
    private userApiService: UserApiService,
    private sanitizer: DomSanitizer,

  ) {
    this.cropImage(this.imageCropUrl);
  }

  ///------------

  fileChangeEvent(event: Event): void {
    this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
    if (event.objectUrl != null) {
      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
    }
    // event.blob can be used to upload the cropped image
  }
  imageLoaded(image: LoadedImage) {
    // show cropper
  }
  cropperReady() {
    // cropper ready
  }
  loadImageFailed() {
    // show message
  }

  cropImage(url: string | undefined) {
    if(url !== undefined){
      this.userApiService.loadImageAsBase64(url).subscribe(data => {
        this.image = data;
      })
    }
  }


}