import { Component, Input, Output, ViewChild, ViewContainerRef, EventEmitter, OnInit, ContentChild, TemplateRef, AfterViewInit } from '@angular/core';

/**
 * 分页导航部件
 *
 * @export
 * @class AppScrollPaging
 * @implements {OnInit}
 * @implements {AfterViewInit}
 */
@Component({
    selector: 'app-scroll-paging',
    templateUrl: 'app-scroll-paging.html',
    styleUrls: ['app-scroll-paging.scss']
})
export class AppScrollPaging implements OnInit, AfterViewInit {
    @ContentChild('pagingItemContent', { read: TemplateRef })
    template: TemplateRef<any>;
    /**
     * 容器
     *
     * @type {ViewContainerRef}
     * @memberof AppScrollPaging
     */
    @ViewChild('AppScrollPaging', { read: ViewContainerRef })
    container: ViewContainerRef;
    /**
     * 分页
     *
     * @type {({id: string, text: string}[] | any[])}
     * @memberof AppScrollPaging
     */
    @Input()
    items: { id: string, text: string, counter?: number }[] | any[] = [];
    /**
     * 激活分页
     *
     * @type {string}
     * @memberof AppScrollPaging
     */
    @Input()
    active: string;
    /**
     * 展示位置
     *
     * @type {('top' | 'left' | 'bottom' | 'right')}
     * @memberof AppScrollPaging
     */
    @Input()
    position: 'top' | 'left' | 'bottom' | 'right' = 'top';
    /**
     * 选中分页改变
     *
     * @type {EventEmitter<{index: number, id: string}>}
     * @memberof AppScrollPaging
     */
    @Output()
    activeChange: EventEmitter<{ index: number, id: string }> = new EventEmitter();

    private pagingDoms: HTMLCollectionOf<HTMLDivElement>;
    private element: HTMLDivElement;
    public classStr: string = '';

    /**
     * Creates an instance of AppScrollPaging.
     * @memberof AppScrollPaging
     */
    constructor() { }

    public ngOnInit(): void {
        if (!this.active && this.items.length > 0) {
            this.active = this.items[0].id;
        }
        this.classStr = `app-scroll-paging-tab ${this.position} ${(this.items.length < 5) ? 'move' : ''}`;
    }

    public ngAfterViewInit(): void {
        if (this.container && this.container.element && this.container.element.nativeElement) {
            this.element = this.container.element.nativeElement;
            this.pagingDoms = this.element.getElementsByTagName('div');
        }
    }

    /**
     * 激活分页
     *
     * @param {number} index
     * @param {string} id
     * @memberof AppScrollPaging
     */
    public activePaging(index: number, id: string): void {
        this.active = id;
        this.activeScrollInto(id);
        this.activeChange.emit({ index, id });
    }

    /**
     * 改变选中
     *
     * @private
     * @param {string} id
     * @memberof AppScrollPaging
     */
    private activeScrollInto(id: string): void {
        if (this.container && this.container.element && this.container.element.nativeElement) {
            for (let i: number = 0; i < this.pagingDoms.length; i++) {
                const item = this.pagingDoms.item(i);
                if (Object.is(item.id, id)) {
                    if (Object.is(this.position, 'top') || Object.is(this.position, 'bottom')) {
                        const scrollLeft: number = Math.floor(item.offsetLeft - (this.element.clientWidth / 2) + (item.clientWidth / 2));
                        this.element.scrollTo(scrollLeft, 0);
                    } else {
                        const scrollTop: number = Math.floor(item.offsetTop - (this.element.clientHeight / 2) + (item.clientHeight / 2));
                        this.element.scrollTo(0, scrollTop);
                    }
                    break;
                }
            }
        }
    }

}