import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {GoogleSignInSuccess} from 'angular-google-signin';
import { Router, ActivatedRoute } from '@angular/router';
import { ServerService } from '../../app/services/server.service';
import { Project } from '../entities/model/project';
import { Dmp } from '../entities/model/dmp';
import { Dataset } from '../entities/model/dataset';
//import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
import {DataTable} from 'angular2-datatable';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param';
import { ModalComponent } from '../modal/modal.component';
import { HttpErrorResponse } from '@angular/common/http';
import { FormGroup, FormControl }                 from '@angular/forms'; //na dw an xreiazontai
import { NgForm } from '@angular/forms';
import { DatepickerOptions } from 'ng2-datepicker';
import { StatusToString} from '../pipes/various/status-to-string';
import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
import {MenuItem} from 'primeng/primeng';
import { BreadcrumbService } from '../services/breadcrumb.service';

import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe';


declare var $ :any;

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


@Component({
  selector: 'projects',
  templateUrl: 'project.html',
  styleUrls: ['./project.css'],
  providers:  [ServerService]
})

export class ProjectsComponent implements OnInit{

// Start ALTERNATIVE
  //whole dmp data model
  tableData : any[] = new Array();
  
  //organisation editor data model
  editingOrganisation: any = {};
  organisationEditorForm : any;

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

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


  // for tableIds
  showIDs : boolean = false;
// END ALTERNATIVE

  returnUrl: string;
  @Input() projectCount = 0;
  @Input() datasetDropDown:DropdownField;
  @Input() statusDropDown: DropdownField;
  //@Input() dataSetVisibe:boolean;
  @Input() datasets: Dataset[];  
  project: any;
  modalEditedRow: ModalComponent;
  public item:any;
  public show:boolean = false;
  public dataSetVisibe:boolean = false;
  @ViewChild(DataTable) projectsTable;
  @ViewChild(DataTable) datasetsTable;
  @ViewChild('isignOutBtn') isignOutBtn;


  options: DatepickerOptions = {
    minYear: 1900,
    maxYear: 2050,
    displayFormat: 'MMM D[,] YYYY',
    barTitleFormat: 'MMMM YYYY',
    firstCalendarDay: 0 // 0 - Sunday, 1 - Monday
  };

  //breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
  breadcrumbData: MenuItem[] = new Array<MenuItem>();

  constructor( 
    private serverService: ServerService,
    private route: ActivatedRoute,
    private breadcrumbService : BreadcrumbService,
    private router: Router) {
      this.datasetDropDown = new DropdownField();
      this.datasetDropDown.options = [];
      this.datasets = [];
      this.statusDropDown = new DropdownField();
      this.statusDropDown.options= [{key:'0', value:"Active"},{key:'1', value:"Inactive"}]
      //this.projects = [];
      this.project = this.getEmptyProject();
  }

  ngAfterViewInit() {
    
  }

getEmptyProject(){
  return {
    label: '',
    abbreviation:'',
    reference:'',
    uri:'',
    description:'',
    enddate:'',
    startdate:''
  }
}


  ngOnInit() {

    this.getProjects();

    this.breadcrumbService.clearAll();
    this.breadcrumbData.push({label:'My Projects', routerLink:"/projects"});
    this.breadcrumbService.setData(this.breadcrumbData);

  }

    
getProjects(muted? : boolean){
  this.serverService.getProjectsOfUser().subscribe(  
  response => {
    this.tableData = response;
    if(muted && muted!=true)
      simple_notifier("success",null,"Updated projects table");
  },
  err => {
    simple_notifier("danger",null,"Could not retrieve projects");
  }
);
}
 

getDMPs(){
  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);
      },
      error => {

      }
    );
      
    }
  )
}

showDatasets(){ //dmpId, event
  //this.dataSetVisibe = true;
      
}


SaveProject(){

  let action : Observable<any>;

  if(this.project.id == null) //means it's a new one
    action = this.serverService.createProject(this.project);
  else
    action = this.serverService.updateProject(this.project);
  action.subscribe(
    response =>{
      this.getProjects();
      simple_notifier("success",null, (this.project.id == null) ? "Created" : "Updated" +" projects table");    
    },
    error => {
      simple_notifier("danger",null, "Could not "+ (this.project.id == null) ? "create" : "update" + " projects table");  
    }
  );
  
  $("#newEditProjectModal").modal("hide");
}

  newProject(item){
    this.project = this.getEmptyProject();
    $("#newEditProjectModal").modal("show");

  }

  editRow(item, event){ 
    this.project = item;  //this will have id - that defines whether it's an update or not
    $("#newEditProjectModal").modal("show");

    return false;
  }


  /*
  markProjectForDelete(project){
    this.project = project;
  }
  
  deleteProject(confirmation){
    if(confirmation==true)
      this.deleteRow(this.project);
  }
  */

}