import {
    Component, OnInit, ElementRef, AfterViewInit, OnChanges,
    Output, EventEmitter, ViewChild, Injector, Renderer2, Input, SimpleChanges
} from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { PersonalConfigService } from './lookup-presonalConfig.service';

@Component({
    selector: 'lookup-tabs',
    templateUrl: './lookup-tabs.component.html',
    styleUrls: ['./lookup-tabs.component.scss'],
    animations: [
        trigger('flyInOut', [
            transition(':enter', [style({ opacity: 0 }), animate('.3s', style({ opacity: 1 }))]),
            transition(':leave', [animate('.3s', style({ opacity: 0 }))])
        ])
    ]
})
export class LookupTabsComponent implements OnInit, OnChanges, AfterViewInit {

    @Input() enableFav = false;
    @Input() enableSelected = false;
    @Input() selectedTotal = 0;
    @Input() activeTab = 'datalist';

    @Output() tabChange = new EventEmitter<any>();

    @ViewChild('inkBar') inkBarRef: ElementRef;
    @ViewChild('dataListNav') dataListNavRef: ElementRef;
    @ViewChild('favoriteNav') favoriteNavRef: ElementRef;
    @ViewChild('selectedNav') selectedNavRef: ElementRef;

    public personalConfigService: PersonalConfigService;

    private render: Renderer2 = null;
    private el: ElementRef = null;
    constructor(public injector: Injector) {
        this.personalConfigService = this.injector.get(PersonalConfigService, null);
        this.render = this.injector.get(Renderer2);
        this.el = this.injector.get(ElementRef);
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.activeTab && !changes.activeTab.isFirstChange()) {
            this.initInkBarPos(changes.activeTab.currentValue);
        }
    }

    ngAfterViewInit() {
        setTimeout(() => {
            this.initInkBarPos(this.activeTab);
        }, 300);
    }

    navClickHandle(e: Event, v: string) {
        e.stopPropagation();
        this.activeTab = v;
        // this.personalConfigService.personalConfObser$.next({tabIndex: v});
        this.tabChange.emit({ event: e, tabIndex: v });
        this.initInkBarPos(v);
    }

    initInkBarPos(which: string) {
        if (!this.enableFav && !this.enableSelected) {
            return;
        }

        let width = this.dataListNavRef.nativeElement.offsetWidth;
        let left = 0;
        if (which !== 'datalist') {
            left = this.dataListNavRef.nativeElement.offsetWidth;
        }
        if (which === 'favorite') {
            width = this.favoriteNavRef.nativeElement.offsetWidth;
        } else if (which === 'selected') {
            if (this.favoriteNavRef) {
                left += this.favoriteNavRef.nativeElement.offsetWidth;
            }

            if (this.selectedNavRef) {
                width = this.selectedNavRef.nativeElement.offsetWidth;
            } else {
                this.activeTab = 'datalist';
            }
        }

        this.inkBarRef.nativeElement.style = `width: ${width}px; transform: translate3d(${left}px, 0px, 0px);`;
    }
    ngOnInit(): void {
        // this.showWhich = this.personalConfigService.getActiveTabIndex();
    }

}