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

@Component({
  selector: 'showSubjects',
  template: `
    <div *ngIf="classifiedSubjects && classifiedSubjects.size > 0" class="uk-text-small">
      <div class="uk-text-muted">
        Subjects by Vocabulary:
      </div>
      <div class="uk-margin-small-top">
        <div *ngFor="let key of getKeys(classifiedSubjects)" style="line-height: 20px">
          <span uk-icon="tag"></span>
          <span class="uk-text-bold uk-text-uppercase"> {{key}}: </span>
          <ng-container *ngFor="let subject of classifiedSubjects.get(key)">
            <span class="uk-display-inline-block label-classified">{{subject}}</span>
          </ng-container>
        </div>
      </div>
    </div>
    <div *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)" class="uk-text-small"
      [class.uk-margin-top]="classifiedSubjects && classifiedSubjects.size > 0">
      <span class="uk-text-muted">Subjects: </span>
      <span *ngIf="subjects && subjects.length > 0">{{subjects.join(', ')}}</span>
      <span *ngIf="(subjects && subjects.length > 0) && (otherSubjects && otherSubjects.size > 0)">, </span>
      <span *ngIf="otherSubjects && otherSubjects.size > 0">
        <span *ngFor="let key of getKeys(otherSubjects); let i=index">
          <span *ngIf="otherSubjects.get(key).length > 0">
            <span>{{otherSubjects.get(key).join(', ')}}</span>
            <span *ngIf="i < (otherSubjects.size - 1)">, </span>
          </span>
        </span>
      </span>
    </div>
  `
})

export class ShowSubjectsComponent {
  @Input() subjects: string[];
  @Input() otherSubjects: Map<string, string[]>;
  @Input() classifiedSubjects: Map<string, string[]>;
  
  // private showClassifiedSbj: boolean = false;
  
  constructor() {
  }
  
  ngOnInit() {
  }
  
  public getKeys(map) {
    return Array.from(map.keys());
  }
}