import { Component, Input, OnInit, AfterViewInit, ElementRef} from '@angular/core';
import { DialogService } from "ng2-bootstrap-modal";
import { Router } from '@angular/router';
import { DatasetsServiceService } from '../services/datasets-service.service';
import { DatasetProfileService } from '../services/dataset-profile.service';
import { DmpsServiceService } from '../services/dmps-service.service';
import { DatasetProfileGUIEditorComponent } from '../dataset-profile-gui-editor/dataset-profile-gui-editor.component';

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

import {Headers, Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-datasets-viewer',
  templateUrl: './datasets-viewer.component.html',
  styleUrls: ['./datasets-viewer.component.css']
})
export class DatasetsViewerComponent implements OnInit, AfterViewInit {

  //This is the table data
  public data: any[] = new Array();
  public filterQuery = "";
  public rowsOnPage = 10;
  public sortBy = "email";
  public sortOrder = "asc";

  //this is for viewing or not ids
  private showIDs: boolean = false;

  //this is for switching between components
  private viewingComponent: number = 1;

  public dmpsIDLabels : any = null;

  //for update sensing...
  private haveChanges : boolean = false;
  
  //for popups
  private clickedDatasetID: string;

  //this is the profile under edit
  private profile : any;

  
  constructor(
    private el: ElementRef, 
    private datasetsService : DatasetsServiceService, 
    private datasetProfileService: DatasetProfileService,
    private http :  Http, 
    private dmpsService: DmpsServiceService, 
    private dialogService:DialogService,
    private router: Router
  ) {

  }


  ngOnInit() : void {
    //this.getDatasetIDs();
    this.getTabularDatasets(false);
    this.dmpsIDLabels = this.dmpsService.getDmpIdsLabels().subscribe((data)=> {this.dmpsIDLabels = data;} );
  }

  ngAfterViewInit() {
    
  }

  onFocusIn($event){
    this.nullSafeProfile();
    this.haveChanges = false;
  }

  onValueChanged($event){
    this.nullSafeProfile();
    this.haveChanges = true;
  }

  onFocusOutLabel($event){
    if(this.haveChanges){
      let datasetID = $event.srcElement.parentElement.parentElement.children[0].textContent;
      console.log("Updating the value of label to: "+$event.target.value+" on row with id: "+datasetID);
      this.datasetsService.getDatasetById(datasetID).subscribe( (data) => {
        data.label = $event.target.value;
        this.datasetsService.setDataset(data).subscribe( (data) => {
          //console.log(data);
        });
        simple_notifier("success",null,"Updated value of label to '"+data.label+"'");
      });
    }
  }


  onFocusOutURI($event){
    if(this.haveChanges){
      let datasetID = $event.srcElement.parentElement.parentElement.children[0].textContent;
      console.log("Updating the value of uri to: "+$event.target.value+" on row with id: "+datasetID);
      this.datasetsService.getDatasetById(datasetID).subscribe( 
        (data) => {
          data.uri = $event.target.value;
          this.datasetsService.setDataset(data).subscribe( (data) => {
            //console.log(data);
          }
        );
        simple_notifier("success",null,"Updated value of Uri to '"+data.uri+"'");
        }
      );
    }

  }



  
  onFocusOutProfileWin($event, value:string) {
    this.nullSafeProfile();
    if(this.haveChanges){
      
      //delete this.profile.id;
      //delete this.profile.ruleset.id;
      //delete this.profile.viewstyle.id;

      delete this.profile.dataset;
      delete this.profile.ruleset.datasetProfile;
      delete this.profile.viewstyle.datasetProfile;
      
      console.log("Saving profile: "+JSON.stringify(this.profile));

      //save back
      this.datasetProfileService.createDatasetProfile(this.profile).subscribe( 
        response => {
          simple_notifier("success",null,"Saved Dataset Profile");
          console.log(response);
        },
        err => {
          simple_notifier("danger",null,"Could not save Dataset Profile");
          console.log(err);
        }
      );

      /*
      //save back
      if(this.profile.id == null){  //if profile is new
        //create profile and  a) assign it on data[] and on current profile b) assign it to dataset
        this.datasetProfileService.createDatasetProfile(this.profile).subscribe((resp) => {
          
          this.datasetsService.getDatasetById(this.clickedDatasetID).subscribe( (dataset) => {
            
            if(dataset.profile != null){
              this.profile.id = dataset.profile.id;
              
            }
            dataset.profile = this.profile;
  
            console.log("SAVING DATASET: "+JSON.stringify(dataset));
  
            this.datasetsService.setDataset(dataset).subscribe( (resp) => {
              
              //console.log(resp);
              simple_notifier("success",null,"Updated profile element");
            });
          });

          simple_notifier("success",null,"Updated profile element");
        });
      }
      else{
        //this.getDatasetFromDataArray()

        console.log("this.profile")
        console.log(this.profile)

        //this.profile.dataset = {"id": this.profile.dataset};


        this.datasetProfileService.updateDatasetProfile(this.profile).subscribe( 
          response => {
            simple_notifier("success",null,"Saved DMP Profile");
            console.log(response);
          },
          err => {
            simple_notifier("danger",null,"Could not save DMP Profile");
            console.log(err);
          }
        );

      }
      */
      
    }

  }


  nullSafeProfile(){
    if(this.profile==null){
      console.log("BEFORE:");
      console.log(this.profile);
      this.profile = {'label':null, 'definition':null, 'viewstyle':{'label':null, 'definition':null}, 'ruleset':{'label':null, 'definition':null}};
      console.log("AFTER:");
      console.log(this.profile);
    }
  }



  preventDefaults($event){
    if($event.code == 'Tab') { 
      $event.preventDefault(); 
      //AND NOW HACK THE TAB KEY WITHIN THE TEXT EDITOR
      var start = $event.srcElement.selectionStart;
      var end = $event.srcElement.selectionEnd;
      // set textarea value to: text before caret + tab + text after caret
      $event.target.value = $event.target.value.substring(0, start)+"\t"+$event.target.value.substring(end);
      // put caret at right position again
      $event.srcElement.selectionStart =
      $event.srcElement.selectionEnd = start + 1;
    }
  }

  getTabularDatasets(notifyAlso){

    this.datasetsService.fetchAllDatasets()
      .map((elems) => {
            let tmpData = new Array();
            for (let elem of elems) {
              let row = {
                "id": elem.id,
                "label":elem.label,
                "dmp": elem.dmp,
                "uri": elem.uri,
                "properties": elem.properties,
                "profile": elem.profile
              };
              tmpData.push(row);
            }
            return tmpData;
        }
    )
    .subscribe((data)=> {
      this.data = data;
      if(notifyAlso)
        simple_notifier("info",null,"Refreshed table");
    });
  }


  onShowingPropertiesModal($event){
    var trElem = $event.target;
    while(trElem.nodeName != "TR")
      trElem = trElem.parentElement;
    this.clickedDatasetID = trElem.children[0].textContent;
  }
  

  gotoProfileEditor($event) {
    var trElem = $event.target;
    while(trElem.nodeName != "TR")
      trElem = trElem.parentElement;
    this.clickedDatasetID = trElem.children[0].textContent;

    if(this.clickedDatasetID == null) console.log("Could not retrieve the id of the clicked dataset");

    var dataset = this.getDatasetFromDataArray(this.clickedDatasetID);
    if(dataset != null){
      this.profile = dataset.profile;
      this.goToEditor();
    }

  }

  getDatasetFromDataArray(datasetID){
    for(var dataRow of this.data){
      if(datasetID == dataRow.id)
        return dataRow;
    }
    return null;
  }


  deleteDataset(dataset){
    this.datasetsService.deleteDataset(dataset).subscribe(
      resp =>{
        console.log(status);
        this.refreshTable(null);
        simple_notifier("success",null,"Dataset was deleted");
      },
      err => {
        simple_notifier("danger",null,"Dataset could not be deleted");
      }
    );
  }


  goToEditor(){
    this.viewingComponent = 2;
  }

  goToMain(){
    this.viewingComponent = 1;
  }


  setDmpLabelValueOfDatasetID(datasetID, newVal){
    for(var i=0;i<this.data.length;i++){
      var row = this.data[i];
      if(row.id == datasetID){
        if(row["dmp"] != null && row["dmp"].label != null)
          row["dmp"].label = newVal;
        break;
      }
    }
  }

  setClickedDatasetID($event){
    var trElem = $event.srcElement;
    while(trElem.nodeName != "TR")
      trElem = trElem.parentElement;
    this.clickedDatasetID = trElem.children[0].textContent;
  }


  applyConfirmation($event){
    if($event==true){
      console.log("will delete dataset: "+ this.clickedDatasetID);
      //method 1
      var dataset = {};
      dataset["id"] = this.clickedDatasetID;
      dataset["label"] = " "; 
      this.deleteDataset(dataset);
    }
  }

  notifyNewDatasetID($event){
    this.filterQuery = $event;
    this.refreshTable($event);
  }


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


  assignDMPToDataset($event, dmpID){
    var trElem = $event.srcElement;
    while(trElem.nodeName != "TR")
    trElem = trElem.parentElement;
    var datasetID = trElem.children[0].textContent;

    this.datasetsService.assignDMPToDataset(datasetID, dmpID).subscribe( 
      (resp) => {
        this.setDmpLabelValueOfDatasetID(datasetID, $event.target.text);
        simple_notifier("success",null,"Assigned the dmp on dataset");
      },
      err => {
        simple_notifier("danger",null,"Could not assign the dmp on dataset");
      }
    );

  }


}