import { Component, OnInit, Input,Output,EventEmitter, ViewChild, ElementRef, NgZone } from '@angular/core';
import { ServerService } from '../../app/services/server.service';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';
import { Dataset } from '../entities/model/dataset';
import { Project } from '../entities/model/project';
import { Router, ActivatedRoute } from '@angular/router';

declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'modal',
  templateUrl: './modal.html'
})

export class ModalComponent implements OnInit {

  @Input() datasetDropDown: DropdownField;
 // public dataSetVisibe:boolean;
  @Input() datasets: Dataset[]; 
  public project: Project; 
  //datasetResource :DataTableResource<Dataset>; 
  @Input() datasetCount = 0;
   @ViewChild('modalDmps') modalDmps;

  @Input()
  public item:any
  showValue:boolean
  @Input()
  get show(){
    return this.showValue;
  }
  @Output()
  public showChange = new EventEmitter();
  
  set show(value:any){
    this.showValue = value 
    this.showChange.emit(this.showValue)
  }

  dataSetValue:boolean
  @Input()
  get dataSetVisibe(){
    return this.dataSetValue;
  }
  @Output()
  public dataSetValueChange = new EventEmitter();
  
  set dataSetVisibe(value:any){
    this.dataSetValue = value; 
    this.dataSetValueChange.emit(this.dataSetValue)
  }

  constructor(private serverService: ServerService, private router: Router, private ngZone: NgZone) {
    this.datasetDropDown = new DropdownField();
    this.datasetDropDown.options = [];
    //this.dataSetVisibe= false;
    this.datasets = [];
    this.project = new Project();

  
  }

  ngOnInit() {

    this.serverService.listDmpsLabelID().subscribe(
      response => {
        console.log("response");
        console.log(response);
        //let params = new Param();
        response.forEach((dmp) => {
          let params = new Param();
          params.key = dmp.id;
          params.value = dmp.label;
          this.datasetDropDown.options.push(params);
        });

      }
    )
    if(this.show) this.showModal()
  }

  

  showModal(){
    this.project.label = this.item.label;
    this.project.abbreviation = this.item.abbreviation;
    this.project.uri = this.item.uri;
    this.project.id = this.item.id;
    $("#exampleModalDmps").modal("show");
  }

  closeModal(){
    $("#exampleModalDmps").modal("hide");
    this.show = false;
  }

   showDatasets(dmpId, event) {
     debugger;
     this.dataSetVisibe = true;
     $("#exampleModalDmps").modal("hide");
     this.show = false;
    // this.ngZone.run(() => this.router.navigateByUrl('dataset')); //change router
    
   }

  afterLoad(){
    //this.datasetResource = new DataTableResource(this.datasets);
    //this.datasetResource.count().then(count => this.datasetCount = count);
  }
}