import { Component, Input, ContentChildren, Output, EventEmitter, ContentChild, TemplateRef, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

export type TabTypes = 'horizontal' | 'vertical' | 'featured';

@Component({
  selector: 'rd-tab-content',
  template: `
    <ng-content *ngIf="active"></ng-content>
  `
})
export class TabContent extends RdComponent {
  @Input("rd-text") text: string;
  @Input("rd-icon") icon: string;
  @Input("rd-icon-url") iconUrl: string;
  @Input("rd-icon-tooltip") tooltip: string;
  @Input("rd-icon-color") iconColor: string;
  @Input("rd-badge-text") badgeText: string;
  @Input("rd-badge-level") badgeLevel: number | string;

  @Output("rd-on-open") openEvent: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-click-setting") settingEvent: EventEmitter<any> = new EventEmitter<any>();

  active = false;
}

@Component({
  selector: 'rd-tab',
  template: `

    <ng-container *ngIf="type == 'horizontal'">
      <ul class="nav nav-tabs m-tabs-line m-tabs-line--success" role="tablist">
        <li class="nav-item m-tabs__item" *ngFor="let item of contents._results" (click)="contentClicked(item)">
          <a class="nav-link m-tabs__link" data-toggle="tab" href="#" role="tab"  [ngClass]="{active: item.active}">
            <rd-icon [rd-class]="item.icon" [rd-color]="item.iconColor" [rd-tooltip]="item.tooltip" *ngIf="item.icon"></rd-icon>
            {{item.text}}
            <rd-badge [rd-level]="item.badgeLevel" *ngIf="item.badgeText">{{item.badgeText}}</rd-badge>
          </a>
        </li>
      </ul>

      <div class="tab-content">
        <ng-container *ngTemplateOutlet="template"></ng-container>
      </div>
    </ng-container>

    <ng-container *ngIf="type == 'vertical'">
      <div class="row">
        <div class="col-md-3">
          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" *ngFor="let item of contents._results" aria-orientation="vertical"  (click)="contentClicked(item)">
            <a class="nav-link" data-toggle="pill" href="#" role="tab" [ngClass]="{active: item.active}">
              <rd-icon [rd-class]="item.icon" [rd-color]="item.iconColor" [rd-tooltip]="item.tooltip" *ngIf="item.icon"></rd-icon>
              {{item.text}}
              <rd-badge [rd-level]="item.badgeLevel" *ngIf="item.badgeText">{{item.badgeText}}</rd-badge>
            </a>
          </div>
        </div>
        <div class="col-md-9" style="border-left:1px solid #eee">
          <div class="tab-content" id="v-pills-tabContent">
            <ng-container *ngTemplateOutlet="template"></ng-container>
          </div>
        </div>
      </div>
    </ng-container>

    <ng-container *ngIf="type == 'featured'">
      <div class="col-md-12">
        <section class="tabs t-tabs">
          <ul class="nav nav-tabs fancyTabs" role="tablist">
            <li class="tab fancyTab" style="cursor:pointer" [ngClass]="{active: item.active}" *ngFor="let item of contents._results" (click)="contentClicked(item)">
              <div class="arrow-down">
                <div class="arrow-down-inner"></div>
              </div>
              <a href="#" role="tab" aria-selected="true" data-toggle="tab" style="text-decoration:none !important" *ngIf="!item.iconUrl">
                <span [class]="item.icon" *ngIf="!item.iconColor"></span>
                <span class="hidden-xs" *ngIf="!item.iconColor">{{item.text}}</span>

                <span [class]="item.icon" [ngStyle]="{color: item.iconColor}" *ngIf="item.iconColor">
                  <span class="hidden-xs" style="margin-left:.5rem;font-weight:500" [ngStyle]="{color: item.iconColor}">{{item.text}}</span>
                </span>
              </a>
              <img [src]="item.iconUrl" style="width:5rem;height:5rem;margin-top:1rem" *ngIf="item.iconUrl">
              <i class="fas fa-cog" style="float: right;font-size:large;color:#f2784b;padding:0 5px" (click)="item.settingEvent.emit()" *ngIf="item.iconUrl"></i>
              <div class="whiteBlock"></div>
            </li>
          </ul>
          <div class="tab-content fancyTabContent" aria-live="polite">
            <ng-container *ngTemplateOutlet="template"></ng-container>
          </div>
        </section>
      </div>
    </ng-container>
  `
})
export class Tab extends RdComponent implements OnChanges {

  @Input("rd-type") type: TabTypes = "horizontal";
  @ContentChild(TemplateRef) template;
  @ContentChildren(TabContent) contents;

  activeContent;

  ngDoCheck() {
    if (this.contents && this.contents._results.length > 0 && !this.activeContent) {
      this.contentClicked(this.contents._results[0]);
    }
  }

  ngOnChanges(changes) {
    if (this.activeContent && changes.type) {
      setTimeout(() => {
        this.contentClicked(this.contents._results[0]);
      }, 1);
    }
  }

  activateContent(content) {
    if (this.activeContent) this.activeContent.active = false;
    this.activeContent = content;
    this.activeContent.active = true;
  }

  contentClicked(content) {
    if (!content.active) {
      this.activateContent(content);
      content.openEvent.emit();
    }
  }
}