
import { ChangeDetectorRef, Component, ContentChildren, EventEmitter, Injector, Input, Output, QueryList, TemplateRef, Type, ViewChild } from '@angular/core';

import { NbpBaseComponentA11YWrapper, NbpStyle } from '@isp/xdce-widget/base';

import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';
import { NbpFidToggleTabsetComponentA11Y } from './nbp-fid-toggle-tabset.component.a11y';
import { NbpFidToggleTabsetComponentNOA11Y } from './nbp-fid-toggle-tabset.component.noa11y';


@Component({
    template: "<ng-container #componentContainer></ng-container><ng-template #wngContent><ng-content></ng-content></ng-template>",
    selector: "nbp-fid-toggle-tabset",
    
})
export class NbpFidToggleTabsetComponent extends NbpBaseComponentA11YWrapper<NbpFidToggleTabsetComponentA11Y, NbpFidToggleTabsetComponentNOA11Y> {

    private _cdr: ChangeDetectorRef;

    constructor(private inj: Injector){
        super(inj);
        this._cdr = this.inj.get(ChangeDetectorRef);
    }

    @ViewChild('wngContent', { read: TemplateRef })
    protected wngContent: TemplateRef<any>;

    @ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;


    get A11Ycomponent(): Type<NbpFidToggleTabsetComponentA11Y> {
        return NbpFidToggleTabsetComponentA11Y;
    }

    get noA11Ycomponent(): Type<NbpFidToggleTabsetComponentNOA11Y> {
        return NbpFidToggleTabsetComponentNOA11Y;
    }

    ngOnInit(): void {
        super.ngOnInit();
        this.component.wngContent = this.wngContent;
    }

    ngAfterViewInit() {
        this.component.tabs = this.tabs;
        // needed to refresh the view when this widget is placed inside a component with a OnPush rendering strategy
        this._cdr.detectChanges();
    }
  
    private _nbpStyle: NbpStyle = undefined;
    @Input()
    set nbpStyle(value: NbpStyle) {
        this._nbpStyle = value;
        if (this.component) {
            this.component.nbpStyle = value;
        }
    }
    get nbpStyle(): NbpStyle {
        return this._nbpStyle;
    }

    private _tabBarId: string = undefined;
    @Input()
    set tabBarId(value: string) {
        this._tabBarId = value;
        if (this.component) {
            this.component.tabBarId = value;
        }
    }
    get tabBarId(): string {
        return this._tabBarId;
    }

    @Input()
    set _tabToggleId(value: string) {
        this._tabToggleId = value;
        if (this.component) {
            this.component.tabToggleId = value;
        }
    }
    get tabToggleId(): string {
        return this._tabToggleId;
    }
    private _ariaLabel = undefined;

    @Input('aria-label')
    set ariaLabel(value: string) {
        this._ariaLabel = value;
        if (this.component) {
            this.component.ariaLabel = value;
        }
    }
    get ariaLabel(): string {
        return this._ariaLabel;
    }
    private _ariaLabelledBy = undefined;
    
    @Input('aria-labelledby')
    set ariaLabelledBy(value: string) {
        this._ariaLabelledBy = value;
        if (this.component) {
            this.component.ariaLabelledBy = value;
        }
    }
    get ariaLabelledBy(): string {
        return this._ariaLabelledBy;
    }
    @Output() onSelect = new EventEmitter<any>();
    @Output() nbpSelectedIndexChange = new EventEmitter<number>();
}

