import { Component, OnInit, ViewChild } from '@angular/core';
import { DmpsServiceService } from '../../services/dmps-service.service';
import { ProjectService } from '../../services/project-service';
import { DmpProfileService } from '../../services/dmpprofile-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-dmp-editor',
  templateUrl: './dmp-editor.component.html',
  styleUrls: ['./dmp-editor.component.css']
})
export class DmpEditorComponent implements OnInit {

  constructor(private dmpsServiceService : DmpsServiceService, private projectService : ProjectService, private dmpProfileService: DmpProfileService,  private fb: FormBuilder) {

  }

  //whole dmp data model
  tableData : any[] = new Array();

  //dmp editor data model
  editingDmp: any = {};
  dmpEditorForm : any;

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

  //visibility rules for containers
  dmpTableVisible: boolean = true;
  dmpEditorVisible: boolean = false;


  dmpsLabelsIDs: any = new Array();
  projectLabelsIDs: any = new Array();
  profileLabelsIDs: any = new Array();


  // for tableIds
  showIDs : boolean = false;
  
  
  ngOnInit() {
    this.getAllDmps(false);
    this.createDmpEditorForm();
  }

  createDmpEditorForm(){
    this.dmpEditorForm = this.fb.group({
      id: null,
      previous: null,
      label: ['', Validators.required ],
      version: '',
      project: '',
      profileData: '',
      profile: ''
    });

  }

  switchToTable(){
    this.dmpTableVisible = true;
    this.dmpEditorVisible = false;
  }

  switchToEditor(dmpID){

    this.dmpTableVisible = false;
    this.dmpEditorVisible = true;
    if(dmpID == null){
      this.editingDmp = {id: null, previous: "", label: "", version: "", project: "", profileData: "", profile: "" };
    }
    else{
      this.editingDmp = this.tableData.filter((dmp) => dmp.id === dmpID)[0];
    }
    this.projectService.getProjectIdsLabels().subscribe((data) => this.projectLabelsIDs = data);
    this.dmpProfileService.getDmpProfileIdsLabels().subscribe( (data) => this.profileLabelsIDs = data);
    this.dmpsServiceService.getDmpIdsLabels().subscribe ( (data) => this.dmpsLabelsIDs = data);
  }


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


  editDmp(dmp){
    this.switchToEditor(dmp);
  }

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

  //for setting option selection of form (because it's not supported by angular native functions) (see https://github.com/angular/angular/issues/6573)
  setFormPreviousValue($event){
    if($event != null && $event.target != null)
      this.editingDmp.previous = $event.target.value;
  }
  setFormProjectValue($event){
    if($event != null && $event.target != null)
      this.editingDmp.project = $event.target.value;
  }
  setFormProfileValue($event){
    if($event != null && $event.target != null)
      this.editingDmp.profile = $event.target.value;
  }



  save(mouseEvent){
    this.dmpsServiceService.create(this.dmpEditorForm.value).subscribe( 
      response => {
        simple_notifier("success",null,"Saved dmp");
        this.getAllDmps(false);
        this.switchToTable();
      },
      err => {
        simple_notifier("danger",null,"Could not save dmp");
      }
    );
  }

  delete(dmp){
    console.log(dmp);
    this.dmpsServiceService.delete(dmp).subscribe(
      (response) => {
        simple_notifier("success",null,"Deleted dataset");
        this.getAllDmps(false);
        this.switchToTable();
      },
      (err) => {
        simple_notifier("danger",null,"Could not delete dmp");
      }
    )
  }



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


  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;


}