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, ContextNode, 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, ContextParam } 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 dialog: 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;
  }
  
  showParamsDialog(context: Context): void {
    const dialogRef = this.dialog.open(ContextParamsDialog, {
      data: context.parameters,
      width: '80%'
    });
  }

}

@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 implements OnInit {
  
  context?:Context
  categories:ContextNode[] = [];

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

  ngOnInit() {
    this.route.queryParams.subscribe((params) => {
      this.service.loadContext(params['id'], (data: Context) => this.context = data);
      this.service.loadContextCategories(params['id'], (data:ContextNode[]) => this.categories = data);
    });
  }

  populateNode(level:number, node:ContextNode): void {
    this.service.loadContextConcepts(level, node.id, (data:ContextNode[]) => {
      node.populated = true;
      node.childs = data
    });
  }

  showParamsDialog(params:ContextParam[] | undefined): void {
    if (params) {
      this.dialog.open(ContextParamsDialog, {
        data: params,
        width: '80%'
      });
    }
  }

}