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

export type ButtonSizes = 'small' | 'medium';

@Component({
  selector: "rd-button",
  template: `
    <button #button class="btn m-btn m-btn--icon" rd-button [ngClass]="finalizedClass"
          [attr.disabled]="disabled ? true : null"
          [attr.small]="size == 'small' ? true : null"
          (click)="onClick(button)">
      <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>
  `
})
export class Button extends RdComponent implements OnChanges {
  @Input("rd-text") text: string;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-color") color: string;
  @Input("rd-icon") icon: string;
  @Input("rd-size") size: ButtonSizes = 'medium';
  @Input("rd-process") onProcess: boolean;

  @Output("rd-click") clickEvent: EventEmitter<any> = new EventEmitter<any>();

  finalizedClass = "";

  ngOnChanges(changes) {
    if (changes.onProcess && changes.onProcess.currentValue != undefined) {
      if (this.onProcess) this.disabled = true;
      else this.disabled = false;
    }

    this.finalizedClass = this.getClass();
  }

  onClick(btn) {
    this.clickEvent.emit(null);
    this.jQuery(btn).blur();
  }

  getClass() {
    switch (this.color) {
      case 'red': return 'btn-outline-danger';
      case 'green': return 'btn-outline-success';
      case 'blue': return 'btn-outline-info';
      case 'yellow': return 'btn-outline-warning';
      case 'purple': return 'btn-outline-brand';
      case 'cyan': return 'btn-outline-accent';
      case 'darkblue': return 'btn-outline-primary';
    }
  }
}