import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {AnnotationService} from "./annotation.service";
import {DomSanitizer} from "@angular/platform-browser";
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";

@Component({
  selector: 'b2note',
  template: `
    <form ngNoForm
          action="https://b2note-dev.bsc.es/widget/"
          method="post"
          target="b2note_iframe"
          class="uk-padding-small uk-padding-remove-vertical">
      <!--URL of the annotated record-->
      <input
          type="hidden"
          name="recordurl_tofeed"
          [value]="url">
      <!--URL of the record contents for downloading-->
      <input
          type="hidden"
          name="subject_tofeed"
          [value]="url">
      <!--PID of the annotated record-->
      <input
          type="hidden"
          name="pid_tofeed"
          [value]="pid">
      <!--URL of the record contents for downloading-->
      <button class="uk-button uk-button-secondary uk-width-1-1"
              (click)="toggleAnnotation($event)"
              type="submit"
              value="Annotate"
              title="Click to annotate file using B2Note.">
        Annotate
      </button>
    </form>
    <div [class.uk-hidden]="!visible" class="widget-container">
      <!--Close button, should be bound to hide the widget-->
      <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
        <span aria-hidden="true">×</span>
      </button>
      <!--The glorious iframe with the running app!-->
      <iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
      </iframe>
    </div>`,
  styleUrls: ['annotation.css']
})
export class AnnotationComponent implements OnInit, OnDestroy {
  
  @Input()
  public landingInfo: ResultLandingInfo = null;
  @Input()
  public id: string = null;
  public url: string = null;
  public pid: string = null;
  public keywords: string[] = [];
  public visible: boolean = false;
  
  
  constructor(private annotationService: AnnotationService,
              private sanitizer: DomSanitizer) {
  }
  
  ngOnInit(): void {
    if (typeof window !== "undefined") {
      let id = this.id;
      this.url = window.location.href;
      if (this.landingInfo.deletedByInferenceIds) {
        id = this.landingInfo.deletedByInferenceIds[0];
        this.url = this.url.replace(this.id, id);
      }
      if (this.landingInfo.identifiers.size > 0) {
        if (this.landingInfo.identifiers.get('doi')) {
          this.pid = this.landingInfo.identifiers.get('doi')[0];
        } else {
          const key: string = this.landingInfo.identifiers.keys().next().value;
          if (key) {
            this.pid = this.landingInfo.identifiers.get(key)[0];
          }
        }
      } else {
        this.pid = id;
      }
      console.log(this.pid);
      console.log(this.url);
    }
  }
  
  ngOnDestroy(): void {
  }
  
  public toggleAnnotation(event) {
    if (this.visible) {
      event.preventDefault()
    }
    this.visible = !this.visible;
  }
}