import { Component, HostListener } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl } from "@angular/forms";

@Component({
  selector: 'app-collection',
  templateUrl: './collection.component.html',
})
export class CollectionComponent {
  selectedFile: File | null = null;
  retrievedImage: any;
  base64Data: any;
  retrieveResponse: any;
  message: string | undefined;
  windowHeight: number = window.innerHeight - 200;
  title: any;
  title2: any;
  selectedLogoControl = new FormControl();
  logoOptionControl = new FormControl();

  constructor(private http: HttpClient)
  {
    this.onResize();
  }

  onFileSelected(event: Event) {
    const element = event.target as HTMLInputElement;
    let files = element.files;
    this.selectedFile = files && files.length > 0 ? files[0] : null;
  }

  onUpload() {
    if (!this.selectedFile) {
      console.log('No file selected');
      return;
    }
    const fd = new FormData();
    fd.append('image', this.selectedFile, this.selectedFile.name);
    fd.append('title', this.title);
    fd.append('title2', this.title2);

    this.http.post('https://localhost:44369/poster/collection', fd)
      .subscribe(res => {
        console.log(res);
        this.retrieveResponse = res;
        this.base64Data = this.retrieveResponse.picBytes;
        this.retrievedImage = 'data:image/jpeg;base64,' + this.base64Data;
      });
  }

  @HostListener('window:resize')
  onResize() {
    this.windowHeight = window.innerHeight - 200;
  }
}
