import {
    Component, Input, TemplateRef, ChangeDetectorRef, Compiler,
    ComponentFactoryResolver, Renderer2, ElementRef,
    ContentChild, OnInit, AfterViewInit, ViewContainerRef, Optional, Type,
    NgModuleFactory,
    AfterViewChecked
} from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { FarrisTabsComponent } from '../tabs/tabs.component';
import { FarrisTabsExtendDirective } from './extend.directive';

@Component({
    selector: 'farris-tab',
    templateUrl: './tab.component.html'
})
export class FarrisTabComponent implements OnInit, AfterViewInit, AfterViewChecked {
    // tabs也可能作为某个flex容器的项目  因此要设置flex属性
    // tslint:disable-next-line:no-inferrable-types
    // 每一个标签页可设置宽度
    setIntervalTab: any;
    
    @Input('width') tabWidth: number = -1;
    @Input() set show(value) {
        this.showStates.next(value);
        this._show = value;
    }
    get show(){
        return this._show;
    }
    @Input() asyncComponent: Type<any>;
    @Input() asyncModule: NgModuleFactory<any>;
    @Input() id: string;
    // 追加自定义的样式
    @Input() titleCustomCls = '';
    // 标记文本是否超出
    titleOverflow:false;
    // tab 标题
    @Input() title: string;
    // selected 是否选中
    // tslint:disable-next-line:no-inferrable-types
    selected: boolean = false;
    // disabled 是否禁止点击
    @Input() disabled: boolean;
    // 是否可移出
    @Input() removeable: boolean;
    @Input() toolbar: any;
    // @Input() content: string | Type<any>;
    // 设置锚点
    @ContentChild('content') contentTempl: TemplateRef<any>;
    @ContentChild(FarrisTabsExtendDirective) farrisTabsExtendDirective: any;
    // appDiv: T;
    showStates = new BehaviorSubject(true);

    // 兼容旧表单
    activeState = new BehaviorSubject(false);
    private _activeForOld: any;
    set _active(value: any) {
        this._activeForOld = value;
        this.activeState.next(value);
    }
    get _active() {
        return this._activeForOld;
    }
    view: ViewContainerRef;
    tempDirective: any;
    popupFlag: boolean;
    _show: boolean = true;
    // 无用代码
    get active() {
        return this._active;
    }
    headingRef: TemplateRef<any>;
    compOrHtml: any;
    constructor(private cp: Compiler, public componentFactoryResolver: ComponentFactoryResolver, private render: Renderer2,
        private el: ElementRef, private cef: ChangeDetectorRef, @Optional() public scrollTabs: FarrisTabsComponent) {
    }
    /**
     * 内容是否激活
     */
    ngOnInit() {
        this.scrollTabs.tabs.push(this);
        if (!this.scrollTabs.activeId) {
            this.scrollTabs.tabs[0]._active = true;
        } else {
            this.scrollTabs.load();
        }
    }
    ngAfterViewInit(): void {
        // 为了兼容弄旧表单，不兼容HostBinding, 通过追加class的方式实现
        const nEl = this.el.nativeElement;
        this.activeState.subscribe(data => {
            this.render.addClass(nEl, 'farris-tabs-body');
            if (data) {
                this.render.addClass(nEl, 'f-tab-active');
                this.render.removeClass(nEl, 'f-tab-d-none');
            } else {
                this.render.addClass(nEl, 'f-tab-d-none');
                this.render.removeClass(nEl, 'f-tab-active');
            }
        });
    }
    ngAfterViewChecked() {

    }
    loadComponent() {

    }

}