/**
 * The main component that renders single TabComponent
 * instances.
 */
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {TabComponent} from './tab.component';

@Component({
  selector: 'my-tabs',
  template: `
    <ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
        <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
					<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
          <div>{{tab.title}}</div>
          <div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
        </a>
      </li>
    </ul>
    <div  class="uk-switcher tabs-content">
      <ng-content></ng-content>
    </div>
  `
})
export class TabsComponent {
  @Input()
  public customClass: string;
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
  @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();

  selectTab(tab: TabComponent){
    // activate the tab the user has clicked on.
    this.selectedActiveTab.emit(tab.tabId);
  }
}