import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';

@Component({
  selector: 'app-dashboard-page',
  templateUrl: './dashboard-page.component.html',
  styleUrls: ['./dashboard-page.component.scss']
})
export class DashboardPageComponent implements OnInit {

  displayedColumns: string[] = ['name', 'description'];
  dataSource: Dashboard[] = [];
  loading = true;

  constructor(public dialog: MatDialog, private dashboardService: DashboardService){

  }

  ngOnInit(): void {
      this.refreshTable();
  }

  refreshTable(){

    this.loading = true;
    this.dashboardService.getDashboards().subscribe((dashboardList: DashboardList) => {
      this.dataSource = dashboardList.dashboards;
      this.loading = false;
    });
  }

  createNewDashboard() {
    const dialogRef = this.dialog.open(NewDashboardComponent, {
      data: {name: "", description: ""},
      hasBackdrop: true
    });

    dialogRef.afterClosed().subscribe((result: DashboardCreationData) => {
      console.log('The dialog was closed with result ', JSON.stringify(result));
      this.dashboardService.createDashboard(result).subscribe(result => {
        console.log(result);

        this.refreshTable();
      });
    });
  }
}