import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
import { ActivatedRoute } from '@angular/router';
import { Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
import { PlotConfig, PlotRequest, PlotResponse, PlotService } from 'src/app/plot.service';
import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {

  dashboard?: Dashboard = undefined;

  plotWidgetRenderData: PlotWidgetRenderData[] = [];

  constructor(
    private route: ActivatedRoute,  
    private service: DashboardService, 
    private dialog: MatDialog, 
    private snackBar: MatSnackBar, 
    private plotService: PlotService) {}

  ngOnInit(): void {
      this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe((dashboard: Dashboard) => {
        this.dashboard = dashboard;

        dashboard.plots.forEach(p => {
          this.plotWidgetRenderData.push(new PlotWidgetRenderData(p));
        });

        this.loadImages(0, this.plotWidgetRenderData);
      });
  }

  loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {

    if (index < plotWidgetQueue.length){
      const plot = plotWidgetQueue[index];
      const request = this.createPlotRequest(plot.widget)
        this.plotService.sendPlotRequest(request).subscribe({
          next: (response: PlotResponse)=> {
            plot.plotResponse= response;
          },
          error: (error:any)=> {},
          complete: () => {
            this.loadImages(index +1 , plotWidgetQueue);
          }
        });
    }
  }

  createPlotRequest(plotWidget: PlotWidget): PlotRequest {
    
    const height = this.height(plotWidget.size);
    const width  = this.width(plotWidget.size);

    const request = new PlotRequest(
      height,
      width,
      600, // thumbnailMaxWidth
      500, // thumbnailMaxHeight
      false, // keyOutside
      false, // generateThumbnail
      (<any>window).submitterId+crypto.randomUUID(),
      plotWidget.config);
   return request;
 }

 height(size: PlotSize): number{
  switch (size) {
    case 'SMALL':
      return 300;
    case 'MEDIUM':
      return 400;
    case 'LARGE':
      return 600;
  }
 }
 width(size: PlotSize): number{
  switch (size) {
    case 'SMALL':
      return 400;
    case 'MEDIUM':
      return 600;
    case 'LARGE':
      return 900;
  }
 }

  addText() {
    this.dialog.open(AddTextDialogComponent,{
      width: '600px'
    }).afterClosed().subscribe((text: string) => {
      this.dashboard!.texts.push(new TextWidget('MEDIUM', text)); 
    });
  }

  addPlot() {
    this.dialog.open(AddPlotDialogComponent,{
      width: 'calc(100% - 1em)',
      height: 'calc(100% - 1em)'
    }).afterClosed().subscribe((config: PlotConfig) => {
      this.dashboard!.plots.push(new PlotWidget('MEDIUM', config));
    });
  }

  save() {
    this.service.saveDashboard(this.dashboard!).subscribe({
      'complete': () => {
        this.snackBar.open("saved dashboard","", {
          duration: 5000,
          verticalPosition: 'top'
        });
      }
    });
  }
}