import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
import { NgIf } from '@angular/common';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
import { RouterLink } from '@angular/router';

@Component({
    selector: 'app-dashboard-page',
    templateUrl: './dashboard-page.component.html',
    standalone: true,
    imports: [NgIf, MatProgressSpinner, MatButton, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, RouterLink, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow]
})
export class DashboardPageComponent implements OnInit {

  displayedColumns: string[] = [/*'icon',*/ 'name', 'description','actions'];
  dataSource: Dashboard[] = [];
  loading = true;
  error = "";

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

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

  refreshTable() {
    this.loading = true;
    this.dashboardService.getDashboards().subscribe({
      'next':(dashboardList: DashboardList) => {
        this.dataSource = dashboardList.dashboards;
        this.loading = false;
      },
      'error': (error: HttpErrorResponse) => {
        if (error.status == 504){
          this.error = "Server Unreachable";
        }else{
          this.error = "Failed to load dashboards";
        }
        this.loading = false;
      }
    });
  }

  createNewDashboard() {
    const dialogRef = this.dialog.open(NewDashboardComponent, {
      data: {name: "", description: ""},
      width: '30em'
    });

    dialogRef.afterClosed().subscribe((result: DashboardCreationData) => {
      this.dashboardService.createDashboard(result).subscribe(result => this.refreshTable());
    });
  }

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

    dialogRef.afterClosed().subscribe((result?: DashboardCreationData) => {

      if (result) {
        dashboard.name = result.name;
        dashboard.description = result.description;
        this.dashboardService.saveDashboard(dashboard).subscribe({
          'error': () => {
            this.snackBar.open("server made a boo boo", "", {
              duration:5000
            })
          },
          complete: () => {
            this.refreshTable()
          }
        });
      }
    });
  }

  delete(dashboard: Dashboard){

    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      data: {title: "", text: "Delete dashboard '"+dashboard.name+"'?", btnOkLabel: "Delete", btnCancelLabel: "Cancel"}
    });

    dialogRef.afterClosed().subscribe((result: boolean) => {
      if (result === true) {
        this.dashboardService.deleteDashboard(dashboard.id).subscribe({
          'error': (error) => {
            this.snackBar.open("failed to delete dashboard","", {
              duration: 5000,
              verticalPosition: 'top'
            });
          },
          'complete': () => this.refreshTable()
        });
      }
    });    
  }
}