import { Component, Input, OnChanges, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
import { Button } from './button';

export type ButtonDropDownSizes = 'btn-sm' | 'btn-md' | 'btn-lg';
export type ButtonDropDownDirections = 'dropdown' | 'dropup' | 'dropright' | 'dropleft';

@Component({
  selector: 'rd-dd-item',
  template: `
    <ng-content></ng-content>
  `
})
export class ButtonDropDownItem extends Button {
  @ContentChild(TemplateRef) template;

  finalizedStyle = {};

  ngOnChanges() {
    this.finalizedStyle = this.setStyle();
  }

  setStyle() {
    let color = "";
    switch (this.color) {
      case 'red': color = '#f4516c'; break;
      case 'green': color = '#34bfa3'; break;
      case 'blue': color = '#36a3f7'; break;
      case 'yellow': color = '#ffb822'; break;
      case 'purple': color = '#716aca'; break;
      case 'cyan': color = '#00c5dc'; break;
      case 'darkblue': color = '#5867dd'; break;
    }
    return { 'color': color };
  }
}

@Component({
  selector: "rd-button-dd",
  template: `
    <div class="btn-group" [ngClass]="direction">
      <button type="button" [class]="'btn ' + _size" [ngClass]="finalizedClass" [attr.disabled]="disabled ? true : null">
        <i [class]="icon" [ngStyle]="{'line-height':text ? '15px' : '18px'}" *ngIf="!onProcess"></i>
        <i class="fa fa-spinner fa-spin" style="color:coral;font-size:13px" *ngIf="onProcess"></i>
        {{text}}
      </button>
      <button type="button" [class]="'btn dropdown-toggle dropdown-toggle-split ' + _size" [ngClass]="finalizedClass"
        [attr.disabled]="disabled ? true : null" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only"></span>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="javascript:;" *ngFor="let item of items"
          [ngStyle]="{'pointer-events':item.disabled ? 'none' : 'all','opacity':item.disabled ? .5 : 1}" (click)="item.clickEvent.emit(null)">
          <i [class]="item.icon" style="line-height:15px" [ngStyle]="item.finalizedStyle"></i>
          <span [ngStyle]="item.finalizedStyle">
            {{item.text}}
          </span>
        </a>
      </div>
    </div>
  `
})
export class ButtonDropDown extends Button implements OnChanges {
  @Input("rd-size") _size: ButtonDropDownSizes = 'btn-sm';
  @Input("rd-direction") direction: ButtonDropDownDirections = "dropdown";

  @ContentChildren(ButtonDropDownItem) items;
}