import { TreeTableComponent } from './../treetable.component';
import { Component, Input, OnInit, Injector, ChangeDetectorRef, EventEmitter, Output, OnChanges, SimpleChanges, DoCheck, ViewChild, ElementRef } from '@angular/core';
import { TreeNode } from '../types/treenode';
import { filter } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';

@Component({
    selector: 'nodes-pager',
    templateUrl: './nodes-pager.component.html',
    styles: [
        `
        .treetable-nodes-pagerbar { height: 22px; line-height: 22px; list-style: none}
        .treetable-nodes-pagerbar li { float: left; box-sizing: border-box; }
        .treetable-nodes-pagerbar .pager-btn {
            width: 22px;
            height: 22px;
            text-align: center;
            border: 1px solid #ccc;
            background: rgb(248 249 250);
            cursor: pointer;
        }
        .treetable-nodes-pagerbar .pager-btn:hover {
            background: white;
        }
        .treetable-nodes-pagerbar .prev {}
        .treetable-nodes-pagerbar .next {
            border-left: 0;
        }

        .pager-btn.disabled{
            color: rgb(204 204 204);
            pointer-events: none;
        }
        .treetable-nodes-pagerbar .pageinfo {
            margin-right: 5px;
            padding-left: 0;
            font-weight: 400;
            padding-right: 5px;
        }

        .treetable-nodes-pagerbar .page-index {
            border: 0;
            background: transparent;
            outline: none;
            appearance: none;
            padding-left: 5px;
            min-width: 50px;
            position: absolute;
            height: 20px;
            text-align: left;
            opacity: 0;
            left: 0;
        }

        .treetable-nodes-pagerbar .page-number-list {
            height: 20px;
            min-width: 30px;
            max-width: 50px;
            overflow: hidden;
            text-align: center;
            position: relative;
            border-bottom: 1px solid #ced4da;
        }
        `
    ]
})
export class TreetableNodesPagerComponent implements OnInit, OnChanges {
    @Input() context: any;
    @ViewChild('pagerList') pagerListEl: ElementRef<any>;
    @Output() pageChange = new EventEmitter();

    showPager = new BehaviorSubject(false);
    pagerInfo = null;

    get pagers() {
        const c = this.getPagerCount();
        if (c) {
            return new Array(c);
        }
        return [];
    }

    constructor(private tt: TreeTableComponent,  private cd: ChangeDetectorRef, private injector: Injector) {
        if (this.tt) {
            this.tt.expand.pipe(
                filter((node: any) => {
                    return node.id === this.context.node.id && node.pagination && node.children.filter(n => !n.__childs_loading__).length;
                })
            ).subscribe(
                (node: TreeNode) => {
                    this.pagerInfo = {...node.pagination};
                    this.showPager.next(true);
                }
            );

            this.tt.appendNew.subscribe(
                (e: any) => {
                    const node = e.parent;
                    if (node.id === this.context.node.id && node.pagination) {
                        this.pagerInfo = {...node.pagination};
                        this.showPager.next(true);
                    }
                }
            );

            this.tt.collapse.subscribe(
                (node: TreeNode) => {
                    if (node.id === this.context.node.id) {
                        this.showPager.next(false);
                    }
                }
            );
        }
    }

    ngOnInit(): void {
        this.setPagerInfo();
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.context && !changes.context.isFirstChange()) {
            this.setPagerInfo();
        }
    }

    private setPagerInfo() {
        if (this.context) {
            const { node } = this.context;
            if (node && node.pagination) {
                this.pagerInfo = { ...node.pagination };
                this.showPager.next(
                    node.expanded && node.pagination
                );
            }
        }
    }

    getPagerCount() {
        const { pageSize, total } = this.pagerInfo;
        if (!total) {
            return 0;
        } else {
            return Math.ceil(total / pageSize);
        }
    }

    isFirstPager() {
        return this.pagerInfo.pageIndex === 1;
    }

    isLastPager() {
        return this.pagerInfo.pageIndex === this.getPagerCount();
    }

    /**
     * Go to the previous page
     */
    previous($event: any) {
        $event.stopPropagation();
        this.setCurrent(this.pagerInfo.pageIndex - 1, this.pagerInfo.pageSize);
    }

    /**
     * Go to the next page
     */
    next($event: any) {
        $event.stopPropagation();
        this.setCurrent(this.pagerInfo.pageIndex + 1, this.pagerInfo.pageSize);
    }

    setCurrent(page: number, pageSize?: number, $event?: any) {
        if ($event) {
            $event.stopPropagation();
        }

        this.pageChange.emit({ pageIndex: page, pageSize, node: this.context.node, context: this.context });
    }

    pagerChanged(newPageIndex: number) {
        this.setCurrent(newPageIndex, this.pagerInfo.pageSize);
    }

}