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, PlotWidget, TextWidget } from 'src/app/dashboard.service';
import { PlotConfig } 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;

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

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

  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'
        });
      }
    });
  }
}