import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
import {PageEvent} from '@angular/material/paginator';
import {ImageMetadata} from '../../interfaces/interface';
import {RestService} from '../../services/rest.service';
import {NGXLogger} from 'ngx-logger';
import {AngularFileUploaderConfig} from 'angular-file-uploader';

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

  @Input()
  images: ImageMetadata[];

  pageSizeOptions: number[] = [5, 10, 25, 100];
  lastPageEvent: PageEvent;

  imageUploadConfig: AngularFileUploaderConfig = {
    uploadAPI: {
      url: this.restService.getPostImageUrl()
    }
  };

  constructor(
    public restService: RestService,
    private logger: NGXLogger
  ) {
  }

  ngOnInit(): void {
    this.lastPageEvent = {pageIndex: 0, pageSize: this.pageSizeOptions[0], length: this.images.length};
  }

  ngAfterViewInit(): void {

  }

  paginationGetStart(): number {
    return this.lastPageEvent.pageIndex * this.lastPageEvent.pageSize;
  }

  paginationGetEnd(): number {
    return this.paginationGetStart() + this.lastPageEvent.pageSize;
  }

  getImageUpdateConfig(filename: string): AngularFileUploaderConfig {
    return {
      uploadAPI: {
        url: this.restService.getUpdateImageUrl(filename),
        method: 'PUT'
      }
    };
  }

  deleteImage(image: ImageMetadata) {
    this.restService.deleteImage(image.filename).toPromise().then(() => {
      this.images = this.images.filter(im => im !== image);
    }).catch(err => this.logger.error(err));
  }
}