import {Component, Input, ElementRef} from '@angular/core';

@Component({
    selector: 'publishedIn',
    template: `
      <dl class="uk-description-list-line">
        <dt class="title">Published in</dt>
        <dd class="line" *ngFor="let key of getKeys(publishedIn) let i=index">
          <div *ngIf="i<5 || showAll" class="{{publishedIn.get(key)['bestAccessMode']}}">
            <span [class]="publishedIn.get(key)['url'].length > 0 ? 'custom-external custom-icon' : ''">
              <span *ngIf="publishedIn.get(key)['url'].length > 1">
                {{key}}
                <span *ngFor="let url of publishedIn.get(key)['url']; let i=index">
                  <a  href="{{url}}" target="_blank"
                      [attr.uk-tooltip]="publishedIn.get(key)['accessMode'][i] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
                      [title]="publishedIn.get(key)['accessMode'][i]">
                    [{{i+1}}]
                  </a>
                </span>
              </span>
              <a *ngIf="publishedIn.get(key)['url'].length == 1"
                  href="{{publishedIn.get(key)['url']}}"
                  target="_blank"
                  [attr.uk-tooltip]="publishedIn.get(key)['bestAccessMode'] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
                  [title]="publishedIn.get(key)['bestAccessMode']">
                {{key}}
              </a>
              <span *ngIf="publishedIn.get(key)['url'].length == 0"
                    [attr.uk-tooltip]="publishedIn.get(key)['bestAccessMode'] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
                    [title]="publishedIn.get(key)['bestAccessMode']">
                {{key}}
              </span>
            </span>
          </div>
        </dd>
        <dd *ngIf="showAll" class="uk-text-right">
          <a class="uk-text-muted" (click)="showAll = !showAll; scroll()">
            View less
          </a>
        </dd>
        <dd *ngIf="!showAll && publishedIn.size > 5">...</dd>
        <dd *ngIf="!showAll && publishedIn.size > 5" class="uk-text-right">
          <a class="uk-text-muted" (click)="showAll = !showAll;">
            View more
          </a>
        </dd>
      </dl>
    `
    })

export class PublishedInComponent {
    //key is name
    @Input() publishedIn: Map<string, {"url": string[], "accessMode": string[], "bestAccessMode": string}>;

    public showAll: boolean = false;

    constructor (private element: ElementRef) {}

    ngOnInit() {}

    public scroll() {
      console.info("scroll into view");
      if (typeof document !== 'undefined') {
         this.element.nativeElement.scrollIntoView();
      }
    }
    public getKeys( map) {
      return Array.from(map.keys());
    }
}