import { Component, ViewChild } from '@angular/core';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { KeyValueRatio } from '../../../../../bizmatch-server/src/models/main.model';
import { ImageService } from '../../services/image.service';
import { LoadingService } from '../../services/loading.service';
import { SharedModule } from '../../shared/shared/shared.module';
export const stateOptions: KeyValueRatio[] = [
  { label: '16/9', value: 16 / 9 },
  { label: '1/1', value: 1 },
  { label: 'Free', value: NaN },
];
@Component({
  selector: 'app-image-cropper',
  standalone: true,
  imports: [SharedModule, AngularCropperjsModule],
  templateUrl: './image-cropper.component.html',
  styleUrl: './image-cropper.component.scss',
})
export class ImageCropperComponent {
  @ViewChild(CropperComponent) public angularCropper: CropperComponent;
  imageUrl: string; //wird im Template verwendet
  value: number = stateOptions[0].value;
  cropperConfig = { aspectRatio: this.value };
  ratioVariable: boolean;
  stateOptions = stateOptions;
  constructor(private loadingService: LoadingService, private imageUploadService: ImageService) {}
  // ngOnInit(): void {
  //   if (this.config.data) {
  //     this.imageUrl = this.config.data.imageUrl;
  //     this.fileUpload = this.config.data.fileUpload;
  //     this.cropperConfig = this.config.data.config ? this.config.data.config : this.cropperConfig;
  //     this.ratioVariable = this.config.data.ratioVariable;
  //   }
  // }
  // sendImage() {
  //   this.fileUpload.clear();
  //   this.ref.close(this.angularCropper.cropper);
  // }

  // cancelUpload() {
  //   this.fileUpload.clear();
  //   this.ref.close();
  // }
  changeAspectRation(ratio: number) {
    this.cropperConfig = { aspectRatio: ratio };
    this.angularCropper.cropper.setAspectRatio(ratio);
  }
}