import { Component, OnInit, ViewChild } from '@angular/core';
import { DatarepoService } from '../../services/datarepo-service';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import '../../../assets/custom.js';
declare function simple_notifier(type: string, title: string, message:string): any;

@Component({
  selector: 'app-datarepos-editor',
  templateUrl: './datarepos-editor.component.html',
  styleUrls: ['./datarepos-editor.component.css']
})
export class DatareposEditorComponent implements OnInit {

  constructor(private datarepoService : DatarepoService,  private fb: FormBuilder) {

  }

  //whole dmp data model
  tableData : any[] = new Array();
  
  //datarepos editor data model
  editingDatarepo: any = {};
  datarepoEditorForm : any;

  //required by the table
  public filterQuery = "";
  public rowsOnPage = 10;
  //public sortBy = "email";
  public sortOrder = "asc";

  //visibility rules for containers
  tableVisible: boolean = true;
  editorVisible: boolean = false;


  // for tableIds
  showIDs : boolean = false;



  ngOnInit() {
    this.getAllDatarepos(false);
    this.createDatareposEditorForm();
  }

  createDatareposEditorForm(){
    this.datarepoEditorForm = this.fb.group({
      id: null,
      label: ['', Validators.required ],
      abbreviation: '',
      reference: '',
      uri: '',
      definition: ''
    });

  }

  switchToTable(){
    this.tableVisible = true;
    this.editorVisible = false;
  }

  switchToEditor(datarepoID){

    this.tableVisible = false;
    this.editorVisible = true;
    if(datarepoID == null){
      this.editingDatarepo = {id: null, label: "", abbreviation: "", reference: "", uri: "", definition: "" };
    }
    else{
      this.editingDatarepo = this.tableData.filter((datarepo) => datarepo.id === datarepoID)[0];
    }
  }


  getAllDatarepos(showNotification : boolean){
    this.datarepoService.getAllDatarepos().subscribe( (data) => {
      this.tableData = data;
      if(showNotification)
        simple_notifier("info",null,"Refreshed the table");
    });
  }


  editDatarepo(datarepo){
    this.switchToEditor(datarepo);
  }

  newDatarepo(){
    this.switchToEditor(null);
  }



  save(mouseEvent){
    this.datarepoService.create(this.datarepoEditorForm.value).subscribe( 
      response => {
        simple_notifier("success",null,"Saved data repository");
        this.getAllDatarepos(false);
        this.switchToTable();
      },
      err => {
        simple_notifier("danger",null,"Could not save data repository");
      }
    );
  }

  delete(datarepo){
    this.datarepoService.delete(datarepo).subscribe(
      (response) => {
        simple_notifier("success",null,"Deleted data repository");
        this.getAllDatarepos(false);
        this.switchToTable();
      },
      (err) => {
        simple_notifier("danger",null,"Could not delete data repository");
      }
    )
  }



  refreshTable($event){
    this.getAllDatarepos(true);
  }


  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;





}