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>
      <ng-container *ngTemplateOutlet="subjects_by_vocabulary_template; context: {customClasses: 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
      <div *ngIf="isClassifiedLarge" class="uk-text-right">
        <a (click)="openSubjectsByVocabularyModal()" class="view-more-less-link">View all</a>
      </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()" class="view-more-less-link">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>

    <ng-template #subjects_by_vocabulary_template let-customClasses="customClasses" let-id="id">
      <div *ngFor="let key of getKeys(classifiedSubjects) let i=index"
           class="uk-flex-inline uk-flex-wrap uk-margin-medium-right"
           [ngClass]="customClasses">
        <p #classifiedContent [id]="id+'_'+key" class="uk-grid uk-grid-small uk-flex-middle uk-margin-bottom uk-margin-remove-left" uk-grid>
          <span class="uk-padding-remove">
                  <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); let j=index" class="uk-width-auto uk-padding-remove uk-display-inline-block">
            <span class="uk-border-rounded uk-label uk-label-small uk-label-primary uk-text-truncate uk-margin-small-right">
              {{subject}}
            </span>
          </span>
        </p>
      </div>
    </ng-template>
    
    <modal-alert #subjectsByVocabularyModal large="true">
      <div class="uk-text-small">
        <ng-container *ngTemplateOutlet="subjects_by_vocabulary_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;
  isClassifiedLarge: boolean = false;
  properties = properties;
  specialSubjects = [];
  @ViewChildren("content", { read: ElementRef }) content: QueryList<ElementRef>;
  @ViewChildren("classifiedContent", { read: ElementRef }) classifiedContent: QueryList<ElementRef>;
  @ViewChild('subjectsModal') subjectsModal;
  @ViewChild('subjectsByVocabularyModal') subjectsByVocabularyModal;

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

  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();
    this.checkLargeClassified();
  }

  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();
    }
  }

  checkLargeClassified() {
    let overflow = 42;
    if(typeof document !== "undefined") {
      this.getKeys(this.classifiedSubjects).forEach(key => {
        let tag = this.classifiedContent.find(tag => tag.nativeElement.id === "content_"+key);
        if(tag && tag.nativeElement.offsetHeight > overflow) {
          this.isClassifiedLarge = true;
        }
      });
      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();
  }

  public openSubjectsByVocabularyModal() {
    this.subjectsByVocabularyModal.cancelButton = false;
    this.subjectsByVocabularyModal.okButton = false;
    this.subjectsByVocabularyModal.alertTitle = "Subjects by Vocabulary";
    this.subjectsByVocabularyModal.open();
  }
}