import { PaginationService } from './pagination.service';
import { PaginationControlsDirective } from './pagination-controls.directive';
import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ElementRef, Optional} from '@angular/core';

function coerceToBoolean(input: string | boolean): boolean {
    return !!input && input !== 'false';
}

// styleUrls: ['./pagination-controls.component.css'],

/**
 * The default pagination controls component. Actually just a default implementation of a custom template.
 */

//  #farris-gotopagenumber{ text-align: center;
//     -moz-appearance: textfield;
//     width: 40px;
// }
// #farris-gotopagenumber::-webkit-outer-spin-button,
// #farris-gotopagenumber::-webkit-inner-spin-button {
//     -webkit-appearance: none;
// }
@Component({
    selector: 'pagination-controls',
    templateUrl: './pagination-controls.component.html',
    styles: [],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None
})
export class PaginationControlsComponent {

    private _directionLinks = true;
    private _autoHide = false;
    private _responsive = false;

    private mouseInSelectedList = false;

    /** 显示模式， default 默认；simple: 简洁 */
    @Input() viewMode = 'default';

    @Input() id: string;
    @Input() maxSize = 7;
    @Input()
    get directionLinks(): boolean {
        return this._directionLinks;
    }
    set directionLinks(value: boolean) {
        this._directionLinks = coerceToBoolean(value);
    }
    @Input()
    get autoHide(): boolean {
        return this._autoHide;
    }
    set autoHide(value: boolean) {
        this._autoHide = coerceToBoolean(value);
    }
    @Input()
    get responsive(): boolean {
        return this._responsive;
    }
    set responsive(value: boolean) {
        this._responsive = coerceToBoolean(value);
    }
    @Input() previousLabel = 'Previous';
    @Input() nextLabel = 'Next';
    @Input() screenReaderPaginationLabel = 'Pagination';
    @Input() screenReaderPageLabel = 'page';
    @Input() screenReaderCurrentLabel = `You're on page`;
    @Input() showPageList = true;
    @Input() showPageInfo = true;
    @Input() showPageNumber = true;

    @Input() showSelectedList = false;

    @Input() showGoToLast = false;
    @Input() showGoToFirst = false;

    /** 显示跳转至指定页码输入框 */
    @Input() showGotoInput = false;

    @Input() position: 'left'|'center'|'right' = 'right';

    /**
     * @deprecated
     */
    @Input() message = '每页 {0} 条记录，共 {1} 条记录';
    /**
     * @deprecated
     */
    @Input() pageListFirstText = '显示';
    /**
     * @deprecated
     */
    @Input() pageListLastText = '条';

    @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
    @Output() pageSizeChange = new EventEmitter<number>();
    @ViewChild('p') paginationDirective: PaginationControlsDirective;

    @ViewChild('focusPageSize') focusPageSizeRef: ElementRef<any>;
    @ViewChild('pglistinfo') pglistinfo: ElementRef<any>;
    showPagesPanel = false;

    // constructor(@Optional() private pagerService: PaginationService) {
    //     if (!this.pagerService) {
    //         this.pagerService = new PaginationService();
    //     }
    // }

    onMouseLeave($event) {
        this.showPagesPanel = false;
        this.paginationDirective.changeDetectorRef.detectChanges();
    }

    onMouseEnter($event: MouseEvent) {
        if (this.paginationDirective.getTotalItems() === 0) {
            return;
        }
        this.showPagesPanel = true;
    }

    changePageSizeHandler($event, pagesize) {
        $event.stopPropagation();
        // 当前页再次点击
        if (pagesize === this.paginationDirective.getPageSize()) {
            return;
        }
        this.showPagesPanel = false;
        // this.removeOverlay();
        this.pageSizeChange.emit(pagesize);
    }

    onPageNumberChanged(inputEl: KeyboardEvent, maxNumber) {
        const target = inputEl.target as any;
        const currentPageNumber = Number(target.value);
        if (currentPageNumber > maxNumber) {
            target.value = maxNumber;
        } else {
            if (currentPageNumber < 1) {
                target.value = 1;
            }
        }
    }

    setPageList(newpageList: number[]) {
        this.paginationDirective.setPageList(newpageList);
    }

    goto($event) {
        const newpager = Number($event.target.value);
        if (this.paginationDirective.getCurrent() !== newpager) {
            this.paginationDirective.goto(newpager);
        }
    }

}