import {Component, Input} from "@angular/core";
import {EnvProperties} from "../../../utils/properties/env-properties";
import {Author} from "../../../utils/result-preview/result-preview";
import {AlertModal} from "../../../utils/modal/alert";

@Component({
  selector: 'landing-header',
  template: `
    <div class="title-section" [class.uk-margin-bottom]="!isSticky" [ngClass]="titleClass">
      <div class="uk-text-small">
        <span *ngIf="entityType" class="uk-text-capitalize uk-text-small">
          {{entityType}}
        </span>
        <span *ngIf="types && removeUnknown(types, true).length > 0">
           {{(entityType?' . ':'') + removeUnknown(types, true).join(' . ')}}
        </span>
        <span>
          <span *ngIf="startDate || endDate">
            {{' . '}}
          </span>
          <span *ngIf="startDate && !endDate">
            {{'from '}}
          </span>
          <span *ngIf="!startDate && endDate">
            {{'until '}}
          </span>
          <span *ngIf="startDate">
            {{startDate | date: 'yyyy'}}
          </span>
          <span *ngIf="startDate && endDate">
            {{' - '}}
          </span>
          <span *ngIf="endDate">
            {{endDate | date: 'yyyy'}}
          </span>
        </span>
        <span *ngIf="status && status != ''">
          {{' . ' + status}}
        </span>
        <span *ngIf="year && year != ''">
          {{' . ' + year}}
        </span>
        <span *ngIf="embargoEndDate">
         . Embargo end date: {{embargoEndDate | date: 'dd MMM yyyy'}}
        </span>
        <span *ngIf="underCuration">
          . <span title="{{buildCurationTooltip()}}"
                  uk-tooltip="pos:bottom-right; delay:10;"
                  class="uk-text-primary">Under curation</span>
        </span>
      </div>
      <div [class]="isSticky ? 'uk-margin-bottom' : 'uk-margin-medium-bottom'">
        <showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
        <div *ngIf="subTitle">
          <span class="uk-text-meta uk-text-small" [innerHTML]="subTitle"></span>
        </div>
      </div>
      <div *ngIf="authors">
        <showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [isSticky]="isSticky"></showAuthors>
      </div>
    </div>`
})
export class LandingHeaderComponent {
  @Input() entityType: string;
  @Input() properties: EnvProperties;
  @Input() types: string[];
  @Input() startDate: number; // project landing
  @Input() endDate: number; // project landing
  @Input() status: string;  // project landing
  @Input() year: string;
  @Input() embargoEndDate: Date;
  @Input() title: string;
  @Input() subTitle: string;
  @Input() authors: Author[];
  @Input() authorLimit: number = 7;
  @Input() showAllAuthors: boolean = true;
  @Input() underCuration: boolean = false;
  @Input() modal: AlertModal;
  @Input() titleClass: string = null;
  @Input() isTitleH1:boolean =true;
  @Input() isSticky: boolean = false;
  public removeUnknown(array: string[], type: boolean = false): string[] {
    if (type) {
      return this.removeDuplicates(array).filter(value => value.toLowerCase() !== 'unknown');
    } else {
      return array.filter(value => value.toLowerCase() !== 'unknown');
    }
  }
  
  public removeDuplicates(array: string[]): string[] {
    return array.filter(value => value.toLowerCase() !== this.entityType);
  }
  
  public buildCurationTooltip(): string {
    let tooltipContent: string = "<div class='uk-padding-small'>";
    
    tooltipContent += "<h5>Record in preview</h5>";
    tooltipContent += "<p>Bibliographic record accepted by the system, but not yet processed by <br> OpenAIRE tools for information quality improvement and de-duplication</p>";
    
    tooltipContent += "</div>";
    return tooltipContent;
  }
}