import { Component, Inject,AfterViewInit, OnInit, ViewChild } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort, Sort } from '@angular/material/sort';
import { Context, WfHistoryEntry } from '../model/controller.model';
import { ActivatedRoute, Params } from '@angular/router';
import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { KeyValue } from '../model/controller.model';
import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

@Component({
  selector: 'app-contexts',
  templateUrl: './contexts.component.html',
  styleUrls: ['./contexts.component.css']
})
export class ContextsComponent implements AfterViewInit ,OnInit {
  contextsDatasource: MatTableDataSource<Context> = new MatTableDataSource<Context>([]);

  colums: string[] = ['id', 'label', 'type', 'buttons'];

  @ViewChild(MatSort) sort: MatSort | undefined

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

  ngOnInit() {
    this.reload();
  }

  ngAfterViewInit() {
    if(this.sort) this.contextsDatasource.sort = this.sort;
  }

  reload() {
    this.service.loadContexts((data: Context[]) => this.contextsDatasource.data = data);
  }

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

  openEditDialog(context: Context): void {
    const dialogRef = this.contextDialog.open(ContextParamsDialog, {
      data: context.parameters,
      width: '80%'
    });
  }

  deleteContext(ctx:Context) {
    if (confirm('Are you sure?')) {
      this.service.deleteContext(ctx.id, (data: void) => this.reload());
    }
  }

}

@Component({
  selector: 'context-dialog',
  templateUrl: 'context-params.html',
  styleUrls: ['./contexts.component.css']
})
export class ContextParamsDialog {
   
  constructor(public dialogRef: MatDialogRef<ContextParamsDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
  }
  
  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'app-context-editor',
  templateUrl: './context-viewer.component.html',
  styleUrls: ['./contexts.component.css']
})
export class ContextViewerComponent {

}