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">
      <span *ngIf="underCuration" title="{{buildCurationTooltip()}}"
            uk-tooltip="pos:bottom-right; delay:10; cls: under-curation-tooltip"
            class="under-curation uk-position-top-right uk-margin-small-right uk-margin-small-top">
      </span>
      <div class="uk-text-small">
        <span *ngIf="entityType" class="uk-text-capitalize">
          {{entityType}}
        </span>
        <span *ngIf="properties.environment !== 'production' && types && removeDuplicates(types).length > 0">
           {{' . ' + removeDuplicates(types).join(' . ')}}
        </span>
        <span *ngIf="properties.environment === 'production' && types && removeUnknown(types, true).length > 0">
           {{' . ' + 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>
      </div>
      <showTitle [titleName]="title" classNames="uk-margin-remove-bottom"></showTitle>
      <div *ngIf="subTitle">
        <span [innerHTML]="subTitle"></span>
      </div>
      <div *ngIf="authors" class="uk-margin-small-bottom uk-margin-small-top">
        <showAuthors [authorsLimit]="authorLimit" [modal]="modal" [showAll]="showAllAuthors" [authors]="authors" [small]="false"></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 = 30;
  @Input() showAllAuthors: boolean = true;
  @Input() underCuration: boolean = false;
  @Input() modal: AlertModal;
  
  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-margin'>";
    
    tooltipContent += "<h4>Record in preview</h4>";
    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;
  }
}