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

@Component({
    selector: 'organizationsTab',
    template: `
        <div *ngIf=" !organizations || organizations.length == 0" class="uk-alert uk-alert-primary uk-animation-fade" role="alert">
            No organizations available
        </div>

        <div *ngIf="  organizations && organizations.length > 0">
            <div *ngIf="organizations.length > pageSize" class="uk-margin-bottom">
              {{organizations.length}} organizations, page {{organizationsPage}} of {{totalPages(organizations.length)}}
              <paging-no-load class="uk-float-right" [currentPage]="organizationsPage" [totalResults]="organizations.length" [size]="pageSize" (pageChange)="updateOrganizationsPage($event)"></paging-no-load>
            </div>

            <div *ngFor="let item of organizations.slice((organizationsPage-1)*pageSize, organizationsPage*pageSize)" class="uk-h4">
                <p *ngIf=" item != undefined && item['id'] != undefined">
                    <!--a href="{{item['url']}}"-->
                    <a [queryParams]="{organizationId: item.id}" routerLinkActive="router-link-active" routerLink="/search/organization">
                        {{item['name']}}
                    </a>
                </p>
                <p *ngIf="item['id'] == undefined">
                    {{item['name']}}
                </p>
            </div>
        </div>
    `
})

export class OrganizationsTabComponent {

    @Input() organizations: {"name": string, "id": string}[];
    public organizationsPage: number = 1;
    public pageSize: number = 10;

    constructor () {}

    ngOnInit() {}

    ngOnDestroy() {}

    totalPages(totalResults: number): number {
      let totalPages:any = totalResults/this.pageSize;
      if(!(Number.isInteger(totalPages))) {
          totalPages = (parseInt(totalPages, this.pageSize) + 1);
      }
      return totalPages;
    }

    updateOrganizationsPage($event) {
      this.organizationsPage = $event.value;
    }
}