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 { Vocabulary } 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-vocabularies',
  templateUrl: './vocabularies.component.html',
  styleUrls: ['./vocabularies.component.css']
})
export class VocabulariesComponent {
  vocsDatasource: MatTableDataSource<Vocabulary> = new MatTableDataSource<Vocabulary>([]);

  colums: string[] = ['id', 'name', 'description', 'buttons'];

  @ViewChild(MatSort) sort: MatSort | undefined

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

  ngOnInit() {
    this.reload();
  }

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

  reload() {
    this.service.loadVocabularies((data: Vocabulary[]) => this.vocsDatasource.data = data);
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    this.vocsDatasource.filter = filterValue;
  }
  
  newVocabularyDialog(): void {
        const dialogRef = this.dialog.open(VocDialog, {
          data: { id: '', name: '', description: '' },
          width: '80%'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  editVocabularyDialog(vocabulary: Vocabulary): void {
    const dialogRef = this.dialog.open(VocDialog, {
      data: vocabulary,
      width: '80%'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) this.reload();
    });
  }

  deleteVocabularyDialog(vocabulary: Vocabulary): void {
    if (confirm("Are you sure?")) {
      this.service.deleteVocabulary(vocabulary.id , (data:void) => this.reload());
    }
  }
    

}

@Component({
  selector: 'app-vocabulary-editor',
  templateUrl: './vocabulary-editor.component.html',
  styleUrls: ['./vocabularies.component.css']
})
export class VocabularyEditorComponent {
}

@Component({
  selector: 'voc-dialog',
  templateUrl: 'voc-dialog.html',
  styleUrls: ['vocabularies.component.css']
})
export class VocDialog {
  vocForm = new FormGroup({
    id:  new FormControl(''),
    name:  new FormControl(''),
    description : new FormControl('')
  });

  constructor(public dialogRef: MatDialogRef<VocDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
    this.vocForm.get('id')?.setValue(data.id);
    this.vocForm.get('name')?.setValue(data.name);
    this.vocForm.get('description')?.setValue(data.description);
  }
  
  onSubmit():void {
    const voc = Object.assign({}, this.data, this.vocForm.value);
    this.service.saveVocabulary(voc, (data: void) => this.dialogRef.close(1), this.vocForm);
  }

  onNoClick(): void {
    this.dialogRef.close();
  }
}