import { Component, Inject } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';
import { WfHistoryEntry } from '../model/controller.model';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { KeyValue } from '../model/controller.model';

@Component({
  selector: 'app-wf-history',
  templateUrl: './wf-history.component.html',
  styleUrls: ['./wf-history.component.css']
})
export class WfHistoryComponent {

  historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);

  colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];

  total: number = 100
  from: number = -1
  to: number = -1

  constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {

    let totalP = route.snapshot.paramMap.get('total');
    let fromP = route.snapshot.queryParamMap.get('from');
    let toP = route.snapshot.queryParamMap.get('to');

    if (totalP) { this.total = parseInt(totalP); }
    if (fromP) { this.from = parseInt(fromP); }
    if (toP) { this.to = parseInt(toP); }

    this.service.loadWfHistory(this.total, this.from, this.to).subscribe({
      next: (data: WfHistoryEntry[]) => this.historyDatasource.data = data,
      error: error => console.log(error),
      complete: () => console.log("Completed")
    })
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    this.historyDatasource.filter = filterValue;
  }

  openWfDialog(wf: WfHistoryEntry): void {
    const wfDialogRef = this.dialog.open(WfDialog, {
      data: wf
    });
  }
}

@Component({
  selector: 'wf-dialog',
  templateUrl: 'wf-dialog.html',
})
export class WfDialog {

  wfDatasource: MatTableDataSource<KeyValue> = new MatTableDataSource<KeyValue>([]);
  colums: string[] = ['k', 'v'];

  constructor(
    public dialogRef: MatDialogRef<WfDialog>,
    @Inject(MAT_DIALOG_DATA) public data: WfHistoryEntry,
  ) {
    let list:KeyValue[] = [];
    for (let [key, value] of new Map(Object.entries(data.details))) {
      list.push({k: key, v: value});
    }
    this.wfDatasource.data = list;
  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    this.wfDatasource.filter = filterValue;
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
}