import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} 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 {MatSnackBar} from '@angular/material/snack-bar';

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

  @Input()
  images: ImageMetadata[];
  @Output()
  reload: EventEmitter<void> = new EventEmitter<void>();

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

  ALL_CLOSED_DEFAULT = [...Array(5)].map(() => this.getDefaultBoolDict(false));
  openImageExpansion = this.ALL_CLOSED_DEFAULT;

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

  private getDefaultBoolDict(value: boolean) {
    return new Proxy({}, {
      get: (target, name) => name in target ? target[name] : value
    });
  }

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

  ngAfterViewInit(): void {

  }

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

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

  deleteImage(image: ImageMetadata) {
    this.restService.deleteImage(image.filename.split('.')[0]).toPromise().then(() => {
      this.snackbar.open('Successfully deleted ' + image.filename, 'Dismiss');
      this.reload.emit();
    }).catch(err => this.logger.error(err));
  }

  loadImage(i: number, id: string, relImage?: ImageMetadata): void {
    if (!relImage) {
      this.restService.getImage(id).toPromise().then(image => {
        this.images[i].image_b64 = 'data:image/jpg;base64,' + image.image_data;
        this.logger.debug('image_b64', i, id, this.images[i].image_b64);
      }).catch(err => {
        this.logger.error('loadImage', i, id, err);
      });
    } else {
      this.restService.getImage(id).toPromise().then(image => {
        relImage.image_b64 = 'data:image/jpg;base64,' + image.image_data;
        this.logger.debug('image_b64', i, id, relImage.image_b64);
      }).catch(err => {
        this.logger.error('loadImage', i, id, err);
      });
    }

  }

  filterOnlyNewestImageVersion() {
    return this.images.filter(image => !image.identifier.includes('_'));
  }

  getImageIndex(image: ImageMetadata) {
    return this.images.findIndex(img => image === img);
  }

  getRelatedImageMeta(image: ImageMetadata) {
    return this.images.filter(im => im.identifier.includes(image.identifier) && im.identifier !== image.identifier);
  }

  checkValidity() {
    setTimeout(() => {
      const start = this.paginationGetStart();
      const end = this.paginationGetEnd();
      const filteredImages = this.filterOnlyNewestImageVersion();
      this.logger.debug('check validity', start, end, filteredImages);

      for (let i = start; i < end; i++) {
        try {
          filteredImages[i].valid = undefined;
          filteredImages[i].available = undefined;
          this.restService.checkImageValid(filteredImages[i].identifier).toPromise().then(
            res => {
              filteredImages[i].valid = res.valid;
              filteredImages[i].available = res.available;
            }
          );
        } catch {
          this.logger.debug('skip non-existing index', i);
        }
      }
    }, 500);
  }
}