import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {Annotation, AnnotationService} from "./annotation.service";
import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
import {EnvProperties} from "../../utils/properties/env-properties";

@Component({
  selector: 'b2note',
  template: `
    <div class="sideInfoTitle uk-margin-small-bottom">Annotations</div>
    <div class="b2note">
      <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-flex uk-flex-middle"
                (click)="toggleAnnotation($event)"
                type="submit"
                title="Click to annotate this page using B2Note.">
          <img src="assets/common-assets/b2note.png" width="48" height="24">
          <span>add annotation</span>
        </button>
      </form>
      <ul class="uk-list uk-list-divider">
        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left">
          <div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
          <div class="uk-width-auto">{{annotation.text}}</div>
          <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
            <li *ngFor="let url of annotation.urls.slice(0, urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>
            <li *ngIf="urlSize < annotation.urls.length"><a (click)="urlSize = annotation.urls.length">+ {{annotation.urls.length - urlSize}} more</a></li>
          </ul>
        </li>
      </ul>
      <div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">
        <button class="uk-button uk-button-default" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
      </div>
    </div>
    <div [class.uk-hidden]="!visible">
      <div class="widget-container" cdkDrag>
        <!--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>
    </div>`,
  styleUrls: ['annotation.css']
})
export class AnnotationComponent implements OnInit, OnDestroy {
  
  @Input()
  public landingInfo: ResultLandingInfo = null;
  @Input()
  public id: string = null;
  @Input()
  public properties: EnvProperties;
  public url: string = null;
  public pid: string = null;
  public keywords: string[] = [];
  public visible: boolean = false;
  public annotations: Annotation[] = [];
  public annotationSize: number = 10;
  public visibleAnnotations: number;
  public urlSize: number = 3;
  
  constructor(private annotationService: AnnotationService) {
  }
  
  ngOnInit(): void {
    this.visibleAnnotations = this.annotationSize;
    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);
      }
      this.pid = this.url;
      this.annotationService.getAllAnnotations(this.properties, this.url).subscribe(annotations => {
        this.annotations = annotations;
        console.log(this.annotations);
      });
    }
  }
  
  ngOnDestroy(): void {
  }
  
  public toggleAnnotation(event) {
    if (this.visible) {
      event.preventDefault();
    }
    this.visible = !this.visible;
  }
}