import { Component, OnInit, Input } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { PlotService, PlotRequest, PlotResponse, PlotResponseStats  } from '../plot.service';

@Component({
  selector: 'pdb-gallery-view',
  templateUrl: './gallery-view.component.html',
  styleUrls: ['./gallery-view.component.scss']
})
export class GalleryViewComponent implements OnInit {


  galleryItems: Array<GalleryItem> = new Array<GalleryItem>();
  
  splitByValuesQueue = new Array<string>();

  constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
  }

  showError(message) {
    this.snackBar.open(message, "", {
      duration: 5000,
      verticalPosition: 'top'
    });
  }

  ngOnInit() {
  }
  
  renderGallery(request: PlotRequest, splitByField: string) {
    const that=this;
    
    this.galleryItems.length = 0;
    this.splitByValuesQueue.length = 0;
    
    request.generateThumbnail = true;
    
    this.plotService.splitQuery(request.query, splitByField).subscribe(function(valuesForSplitBy){
      console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
      that.splitByValuesQueue = valuesForSplitBy;
      that.renderGalleryRecursively(request, splitByField);
    },
    error => {
      that.showError(error.error.message);
    });
  }
  
  renderGalleryRecursively(masterRequest: PlotRequest, splitByField: string){
    const that = this;
    
    if (this.splitByValuesQueue.length == 0){
      return;
    }
    
    const splitByValue = this.splitByValuesQueue.pop();
    
    let request = masterRequest.copy();
    request.query = "("+request.query+") and " + splitByField+"="+ splitByValue;
    
    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse : PlotResponse){
      console.log("response: " + JSON.stringify(plotResponse));
      
      plotResponse.thumbnailUrl = "http://"+window.location.hostname+':8080/'+plotResponse.thumbnailUrl;
      plotResponse.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
      let galleryItem = new GalleryItem(splitByValue, plotResponse);
      that.galleryItems.push(galleryItem);
      that.renderGalleryRecursively(masterRequest, splitByField);
    },
    error => {
      that.showError(error.error.message);
    });
  }

}

@Component({
  selector: 'pdb-gallery-item-view',
  templateUrl: './gallery-item-view.component.html',
  styleUrls: ['./gallery-item-view.component.scss']
})
export class GalleryItemView {
  @Input()
  data: GalleryItem;
  
  
  formatMs(valueInMs):string {
    const ms = Math.floor(valueInMs % 1000);
    const s = Math.floor((valueInMs / 1000) % 60);
    const m = Math.floor((valueInMs / (60*1000)) % 60);
    const h = Math.floor(valueInMs / (3600*1000));
    
    var result = "";
    if (h != 0) {
      result += h+"h ";
    }
    if (h!= 0 || m != 0) {
      result += m+"m ";
    }
    if (h!= 0 || m != 0 || s != 0) {
      result += s+"s ";
      result += ms+"ms";
    } else {
      result += ms+"ms";
    }
    
    return result;
  }
}


export class GalleryItem {
  thumbnailUrl: string;
  imageUrl: string;
  stats: PlotResponseStats;
  splitByValue : string;
  
  constructor(splitByValue: string, plotResponse: PlotResponse){
    this.thumbnailUrl = plotResponse.thumbnailUrl;
    this.imageUrl = plotResponse.imageUrl;
    this.splitByValue = splitByValue;
    this.stats = plotResponse.stats;
  }
}