import { Component, Input } from '@angular/core';
import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service';
import { UtilService } from '../utils.service';
import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
import { FormsModule } from '@angular/forms';
import { NgFor, NgIf } from '@angular/common';

@Component({
    selector: 'pdb-plot-details',
    templateUrl: './plot-details.component.html',
    styleUrls: ['./plot-details.component.scss'],
    standalone: true,
    imports: [MatRadioGroup, FormsModule, MatRadioButton, NgFor, NgIf]
})
export class PlotDetailsComponent {

  @Input()
  stats!: PlotResponseStats;

  hasPercentiles = false;
  
  valueFormat = "time";

  percentilesToPlot : Map<string,string> = new Map();

  constructor(public utils: UtilService){

  }

  ngOnInit() {
    this.hasPercentiles = false;
    this.percentilesToPlot.clear();

    console.log("plotdetails.stats: " + JSON.stringify(this.stats));
    if (this.stats) {
      for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
      {
        const stat = this.stats.dataSeriesStats[i];
        if (stat.percentiles.hasOwnProperty("50.000"))
        {
          this.hasPercentiles = true;
          this.percentilesToPlot.set('median','50.000');
          this.percentilesToPlot.set('75th','75.000');
          this.percentilesToPlot.set('95th','95.000');
          this.percentilesToPlot.set('99th','99.000');
          break;
        }
      }
    }
  }

  percentile(value: number): string {
    return this.utils.format(value, this.valueFormat);
  }

  pointTypeClass(typeAndColor: DashTypeAndColor): string {
    return "plot-details-plotType"
      +" plot-details-plotType_"+typeAndColor.pointType
      +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
  } 
  
  toPercent(statsRow: DataSeriesStats, statsCol: DataSeriesStats, key: string){
    const percentile = this.percentilesToPlot.get(key);
    if (percentile) {
      const rowValue = (<any>statsRow.percentiles)[percentile];
      const columnValue = (<any>statsCol.percentiles)[percentile];
      if (rowValue !== undefined && columnValue !== undefined) {
        return this.utils.toPercent(rowValue / columnValue);
      }
    }
    return "?%"
  }

  percentileStat(key: string, stat: DataSeriesStats): string{
    const plotKey = this.percentilesToPlot.get(key);
    if (plotKey !== undefined){
      console.log("stat.percentiles: ", stat.percentiles);
      const value = (<any>stat.percentiles)[plotKey];
      if (value !== undefined){
        return this.utils.format(value, this.valueFormat);
      }
    }
    return "no value";
  }
}