import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  HostListener,
  Input,
  QueryList,
  ViewChild,
  ViewChildren
} from '@angular/core';
import {properties} from "../../../../environments/environment";

@Component({
  selector: 'showSubjects',
  template: `     
    <ng-container *ngIf="classifiedSubjects && classifiedSubjects.size > 0">
      <div class="uk-text-meta uk-margin-small-bottom">
        Subjects by Vocabulary
      </div>
      <div *ngFor="let key of getKeys(classifiedSubjects)" class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
        <span>
          <span uk-icon="tag"></span>
          <span class="uk-text-bold uk-margin-small-right"> {{key}}: </span>
        </span>
        <span *ngFor="let subject of classifiedSubjects.get(key)" class="uk-width-auto uk-flex">
          <span class="uk-border-rounded uk-label uk-label-small uk-label-primary uk-text-truncate">
            <span *ngIf="specialSubjects.indexOf(subject) == -1 ">{{subject}}</span>
            <a class="uk-link-reset" *ngIf="specialSubjects.indexOf(subject) != -1"
               [routerLink]=" properties.searchLinkToAdvancedResults"
               [queryParams]="getSubjectParameter(subject)">
              {{subject}}
            </a>
          </span>
        </span>
      </div>
    </ng-container>
    <ng-container  *ngIf="(subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0)">
      <div class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0">
        Subjects
      </div>
      <ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
      <div *ngIf="isLarge" class="uk-text-right uk-margin-small-top">
        <a (click)="openSubjectsModal()">View all</a>
      </div>
    </ng-container>

    <ng-template #subjects_template let-customClasses="customClasses" let-id="id">
      <div class="uk-text-break" [ngClass]="customClasses">
        <p *ngIf="subjects && subjects.length > 0"><span #content [id]="id">{{subjects.join(', ')}}</span></p>
<!--        <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>
    </ng-template>
    
    <modal-alert #subjectsModal>
      <div class="uk-text-small">
        <ng-container *ngTemplateOutlet="subjects_template"></ng-container>
      </div>
    </modal-alert>
  `
})

export class ShowSubjectsComponent {
  @Input() subjects: string[];
  @Input() otherSubjects: Map<string, string[]>;
  @Input() classifiedSubjects: Map<string, string[]>;
  isLarge: boolean = false;
  properties = properties;
  specialSubjects = [];
  @ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>;
  @ViewChild('subjectsModal') subjectsModal;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.checkLarge();
  }

  constructor(private cdr: ChangeDetectorRef) {
    if(properties.dashboard == "explore") {
      this.specialSubjects = [
        // "Physics::Optics",
        // "Astrophysics::Cosmology and Extragalactic Astrophysics",
        // "Computer Science::Information Theory",
        // "Physics::Accelerator Physics",
        // "Condensed Matter::Superconductivity",
        "Physics::Atomic Physics",
        // "Computer Science::Robotics",
        // "Computer Science::Computer Science and Game Theory",
        // "Computer Science::Neural and Evolutionary Computation",
        "Mathematics::Combinatorics",
        // "Mathematics::Probability",
        // "Computer Science::Operating Systems",
        // "lcsh:Medicine",
        // "lcsh:Science",
        // "lcsh:Biology (General)",
        // "lcsh:Chemistry",
        // "lcsh:Engineering (General). Civil engineering (General)",
        // "lcsh:Technology"
      ];
    }
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.checkLarge();
  }

  checkLarge() {
    let overflow = 42;
    if(typeof document !== "undefined" && this.content) {
      let element = this.content.find(content => content.nativeElement.id === "content");
      this.isLarge = (element && element.nativeElement.offsetHeight > overflow);
      this.cdr.detectChanges();
    }
  }

  public getKeys(map) {
    return Array.from(map.keys());
  }
  getSubjectParameter(param){
    return {'f0':'resultsubject','fv0':'"' +(param)+'"', size:50};
  }

  public openSubjectsModal() {
    this.subjectsModal.cancelButton = false;
    this.subjectsModal.okButton = false;
    this.subjectsModal.alertTitle = "Subjects";
    this.subjectsModal.open();
  }
}