import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

@Component({
  selector: 'rd-paging',
  template: `
      <div class="m_datatable m-datatable m-datatable--default m-datatable--loaded" style="text-align:center" *ngIf="totalPageCount">
      	<div class="m-datatable__pager m-datatable--paging-loaded">
      		<ul class="m-datatable__pager-nav">
            <li (click)="currentPage != 1 ? gotoPage(1) : null" *ngIf="totalPageCount > groupSize">
      				<a [attr.title] = "translateEn('First')" class="m-datatable__pager-link m-datatable__pager-link--first" [ngClass]="{'m-datatable__pager-link--disabled' : currentPage == 1}" [attr.disabled]="currentPage == 1">
      					<i class="la la-angle-double-left"></i>
              </a>
      			</li>
            <li (click)="currentPage != 1 ? gotoPage(currentPage - 1) : null" *ngIf="totalPageCount > 1">
      				<a [attr.title] = "translateEn('Previous')" class="m-datatable__pager-link m-datatable__pager-link--prev" [ngClass]="{'m-datatable__pager-link--disabled' : currentPage == 1}" [attr.disabled]="currentPage == 1">
      					<i class="la la-angle-left"></i>
              </a>
      			</li>

      			<li *ngFor="let i of pageToShowGroupSize | fill" (click)="gotoPage(i + base)" >
      				<a class="m-datatable__pager-link m-datatable__pager-link-number" [ngClass]="{'m-datatable__pager-link--active': currentPage == i + base}">{{i + base}}</a>
      			</li>

            <li (click)="currentPage != totalPageCount ? gotoPage(currentPage + 1) : null" *ngIf="totalPageCount > groupSize">
      				<a [attr.title] = "translateEn('Next')" class="m-datatable__pager-link m-datatable__pager-link--next" [ngClass]="{'m-datatable__pager-link--disabled' : currentPage == totalPageCount}" [attr.disabled]="currentPage == totalPageCount">
      					<i class="la la-angle-right"></i>
              </a>
      			</li>
            <li (click)="currentPage != totalPageCount ? gotoPage(totalPageCount) : null" *ngIf="totalPageCount > groupSize">
      				<a [attr.title] = "translateEn('Last')" class="m-datatable__pager-link m-datatable__pager-link--last" [ngClass]="{'m-datatable__pager-link--disabled' : currentPage == totalPageCount}" [attr.disabled]="currentPage == totalPageCount">
      					<i class="la la-angle-double-right"></i>
              </a>
      			</li>
            <li *ngIf="totalPageCount > 1">
      				<input type="number" id="inputPageNo" class="m-pager-input form-control" min="1" [attr.max]="totalPageCount" [(ngModel)]="currentPage" (ngModelChange)="gotoPage(currentPage)"
                [ngStyle]="{'width':currentPage > 999 ? '4.9rem' : currentPage > 99 ? '4.3rem' : '3.5rem' }">
      			</li>
      		</ul>
      		&nbsp;/
      		<span class="m--font-info">{{totalPageCount}}</span>
      		<span class="m--font-primary"> *[ {{translateEn('Total')}} : {{itemCount}} ] </span>

      		<div class="m-datatable__pager-info" *ngIf="itemCount > minPageSize">
            <div class="dropdown bootstrap-select m-datatable__pager-size" style="width: 70px;height:40px">
              <button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button">
                <div class="filter-option">
  		            <div class="filter-option-inner">{{pageSize}}</div>
  	            </div>&nbsp;
  	            <span class="bs-caret"><span class="caret"></span></span>
              </button>
              <div class="dropdown-menu" role="combobox">
              	<div class="inner show" role="listbox" aria-expanded="false" tabindex="-1">
              		<ul class="dropdown-menu inner show">
              			<li *ngFor="let i of pageSizeOptions" [ngClass]="{'selected': pageSize == i}" (click)="emitPageSize(i)">
              				<a role="option" class="dropdown-item" [ngClass]="{'selected': pageSize == i, 'active':pageSize == i}" aria-disabled="false" aria-selected="false">
              					<span class=" bs-ok-default check-mark"></span>
              					<span class="text">{{i}}</span>
              				</a>
              			</li>
              		</ul>
              	</div>
              </div>
      			</div>
      		</div>
      	</div>
      </div>
  `
})
export class Paging extends RdComponent implements OnChanges {

  @Input("rd-current-page") currentPage: number;
  @Output("rd-current-pageChange") currentPageChange: EventEmitter<number> = new EventEmitter<number>();
  @Output("rd-change") changeEvent: EventEmitter<number> = new EventEmitter<number>();

  @Input("rd-item-count") itemCount: number;
  @Input("rd-page-size") pageSize: number;
  @Input("rd-additional-page-size") additionalPageSizeList: Array<number>;
  @Output("rd-page-sizeChange") pageSizeChange: EventEmitter<number> = new EventEmitter<number>();

  translateEn = RdLib.localization.translateEn;

  base: number = 1;
  totalPageCount: number;
  groupSize: number = 5;
  pageToShowGroupSize: number = 5;
  currentGroup: number = 1;
  pageSizeOptions: Array<number> = [5, 10, 20, 30, 50, 100];
  minPageSize = 5;

  ngOnChanges(changes) {
    if (changes.itemCount || changes.pageSize) {
      if (this.additionalPageSizeList) this.pageSizeOptions = Array.from(new Set([...this.pageSizeOptions, ...this.additionalPageSizeList]));
      this.totalPageCount = Math.ceil(this.itemCount / this.pageSize);
      if (this.totalPageCount < this.pageToShowGroupSize) this.pageToShowGroupSize = this.totalPageCount;
      this.refreshPageItems(this.currentPage);
    }
  }

  gotoPage(page: number) {
    if (!page) page = 1;
    if (page > this.totalPageCount || page < 1 || isNaN(page)) return;
    this.currentPage = page;

    var group = Math.ceil(page / this.groupSize);
    if (this.currentGroup != group) {
      this.currentGroup = group;
      this.refreshPageItems(page, group);
    }
    this.currentPageChange.emit(page);
    this.changeEvent.emit(page);
  }

  refreshPageItems(page: number, group?: number) {
    if (!group) group = Math.ceil(page / this.groupSize);
    this.base = this.groupSize * (group - 1) + 1;

    if (this.base + this.groupSize - 1 > this.totalPageCount)
      this.pageToShowGroupSize = this.totalPageCount % this.groupSize;
    else this.pageToShowGroupSize = 5;
  }

  emitPageSize(i) {
    this.pageSize = i;
    this.pageSizeChange.emit(i);
  }
}