import {Component, ElementRef, Input} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Citation, CitationData} from './citation.class';
declare var CSL:any;
declare var Sys:any;
//<addThis ></addThis>
@Component({
  selector: 'citeThis',
  template: `

  <div class="citationDownloader ">
    <dl class="uk-description-list-line">
      <!--dt class="title">Cite this {{type}}</dt-->
      <dd class="line"  >
        <select class="select" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()">
          <option *ngFor=" let  style of this.citation.templates let i = index" [value]="style">{{style}}</option>
        </select>
        <div id="citation" class="box-content uk-padding-small" [innerHTML]=citationText></div>
      </dd>
    </dl>
  </div>
  `
})
export class CiteThisComponent {
  private sub:any;
  public selectedStyle:string;
  public citationText:string;
  public citation:Citation = new Citation();
  // public cite: any;
  @Input() result: any;
  @Input() id: string;
  @Input() type: string="article";
  public citeproc;
  public data;


  constructor(private route: ActivatedRoute) {
    this.selectedStyle = this.citation.templates[0];
  }

  ngOnInit() {
    if(typeof window !== 'undefined') {
      // this.citeproc = require('./citeproc.js');
      // console.log(this.citeproc);
      this.parseData();
      this.updateCitation();
    }
  }
  parseData(){
    var citationData:CitationData = new CitationData();

        if(this.result.identifiers && Array.from(this.result.identifiers.keys()).length > 0){
          var keys = Array.from(this.result.identifiers.keys());
          for (var i=0; i<keys.length;i++){
            if(keys[i]=="doi"){
              var ids = this.result.identifiers.get(keys[i]);
              for (var j=0; j<ids.length;j++){
                citationData.DOI = ids[j];
                break;
              }
            }
          }
        }
        citationData.id = this.id;
        if(this.result.types != undefined && this.result.types.length > 0 && this.result.types[0]){
          citationData.type = this.result.types[0].toLowerCase();
        }else if(this.result.type != undefined ){
          citationData.type = this.result.type.toLowerCase();
        }
        if(this.result.title && this.result.title.name){
          citationData.title = this.result.title.name;
        }
        if(this.result.journal && this.result.journal.journal){
          citationData["container-title"] = this.result.journal.journal;
        }
        if(this.result.publisher){
          citationData.publisher = this.result.publisher;
        }
        if( this.result.authors){
          citationData.author = [];
          var max_length = (this.result.authors.length > 10)?10:this.result.authors.length;
          for (var i =0 ;i <  max_length; i++){
            if(this.result.authors[i] && this.result.authors[i].indexOf(", ") !== -1){
              citationData.author.push({given:this.result.authors[i].split(", ")[0], family:this.result.authors[i].split(", ")[1], 'parse-names':true});
            }else{
              citationData.author.push({given:"", family:this.result.authors[i], 'parse-names':true});
            }
            // citationData.authors.push(this.result.authors[i]);
          }
        }
        if(this.result.dateofacceptance  != undefined){
          citationData.issued = {};
          var date:string = (this.result.dateofacceptance)+""; // transform to string in case it is an integer
          var dateArray:string[]  = (date && (date).indexOf('-') !== -1)?[date.split('-')[0]]:[date];
          if(dateArray.length < 3){
            // dateArray.push[1];
            // dateArray.push[1];
          }
           citationData.issued={"date-parts":[[""+dateArray[0]]]};
           if(this.result.date ){
             citationData.date = this.result.date ;
           }
      }


    this.data = citationData;
    // console.log(this.data);

  }
  styleChanged(){
    this.updateCitation();

  }
  updateCitation(){
    var Sys =
      function Sys(lang, data){
     this.lang = lang;
     this.data = data;
       this.changeName = function (name) {
           this.lastName = name;
       };
       this.retrieveLocale= function (lang){

         return this.lang;
       }
       this.retrieveItem= function(id){
         console.log("retrieve id:" + id);
         return this.data;
       }
    };

    var citeproc = new CSL.Engine(new Sys(this.citation.locale,  this.data ), this.citation[this.selectedStyle]);
    citeproc.updateItems([this.data.id]);
    this.citationText = citeproc.makeBibliography();
    this.citationText = ((this.citationText != null) && (this.citationText.length > 1) && (this.citationText[1].length > 0)) ? this.citationText[1][0] : '';

  }

}