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 | number}} organizations, page {{organizationsPage | number}} of {{totalPages(organizations.length) | number}}
              <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)">
                <h4 *ngIf=" item != undefined && item['id'] != undefined">
                    <!--a href="{{item['url']}}"-->
                    <a [queryParams]="{organizationId: item.id}" routerLinkActive="router-link-active" routerLink="/search/organization">
                        <p>{{item['name']}}</p>
                    </a>
                </h4>
                <h4 *ngIf="item['id'] == undefined">
                    <p>{{item['name']}}</p>
                </h4>
            </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;
    }
}