import {
  Component,
  Input,
  Output,
  ContentChildren,
  HostListener,
  EventEmitter,
  AfterContentInit,
  QueryList,
  HostBinding,
  Injector,
  TemplateRef
} from '@angular/core';

import { NbpFidToggleTabComponentNOA11Y } from './nbp-fid-toggle-tab.component.noa11y';
import { NbpStyle } from '@isp/xdce-widget/base';
import { LoggerService } from '@isp/xdce-arch-core-base';
import { NbpBaseComponent, WidgetMode } from '@isp/xdce-widget/base';
import { NbpFidToggleTabComponent } from './nbp-fid-toggle-tab.component';

@Component({
  templateUrl: './nbp-fid-toggle-tabset.component.noa11y.html',
  styleUrls: ['./nbp-fid-tab-toggle.component.noa11y.scss']
})
export class NbpFidToggleTabsetComponentNOA11Y extends NbpBaseComponent {

  wngContent: TemplateRef<any>;

  /**
   * (Opzionale) Enum per impostare lo stile del pulsante.
   * "DEFAULT" | "PRIMARY" | "SECONDRY"
   *  Valore default: "DEFAULT"
   */
  @Input() nbpStyle: NbpStyle = NbpStyle.DEFAULT;

  @Input() tabTemplate: TemplateRef<any>;

  _style: any = NbpStyle;

  // @Input() vertical ;
  @Output() onSelect = new EventEmitter();
  @ContentChildren(NbpFidToggleTabComponent) tabs: QueryList<NbpFidToggleTabComponent>;

  ngAfterContentInit () {
    const actives = this.tabs.filter(t => t.active);

    if (actives.length > 1) {
      this.loggerService.error(`Multiple active tabs set 'active'`);
    } else if (!actives.length && this.tabs.length) {
      this.tabs.first.active = true;
    }
  }

  tabClicked(tab: NbpFidToggleTabComponentNOA11Y) {
    if(tab.disabled) {
      return;
    }
    this.tabs.forEach(element => element.active = false);
    tab.active = true;

    this.onSelect.emit(tab);
  }

  constructor(private loggerService : LoggerService, injector : Injector) {
    super(injector);
  }

  isCorporate() {
    return WidgetMode.CORPORATE === this.widgetMode;
  }

}


