/**
 * The main component that renders single TabComponent
 * instances.
 */
import {AfterContentInit, 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">
<!--      [class.uk-active]="selected === tab.tabId"-->
      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" (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.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
                [ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></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 implements AfterContentInit {
  @Input()
  public customClass: string;
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
  @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
  public selected: string;
  
  ngAfterContentInit() {
    if(this.tabs.length > 0) {
      this.selected = this.tabs.get(0).tabId;
    }
  }
  
  selectTab(tab: TabComponent){
    this.selected = tab.tabId;
    this.selectedActiveTab.emit(tab.tabId);
  }
}