import { Component, Input, OnChanges } from '@angular/core';

export type IconSizes = 'small' | 'porletIconSize' | 'medium' | 'large';

@Component({
  selector: 'rd-icon',
  template: `
    <div (mouseenter)="mouseHover = true; updateValues();" (mouseleave)="mouseHover = false; updateValues();" [ngStyle]="{'font-size': fontSize }">
      <i [ngClass]="finilizedClasses" rd-icon [ngStyle]="{'color':finilizedColor, 'font-size':fontSize, 'margin':'1px'}"></i>
      <span [ngStyle]="{'color':mouseHover ? finilizedColor : textColor,'margin-left':'10px'}">{{text}}</span>
    </div>
  `
})
export class Icon implements OnChanges {
  @Input('rd-class') classes: string;
  @Input('rd-color') color: string;
  @Input("rd-text") text: string;
  @Input("rd-text-color") textColor: string = "#3d3d3d";
  @Input('rd-size') size: IconSizes = "small";
  @Input('rd-animate') animateType: string;
  @Input('rd-activate-on-hover') activateOnHover;

  public finilizedClasses: string;
  public finilizedColor: string;
  public fontSize: string = "12px";
  public mouseHover: boolean;

  ngOnChanges(changes) {
    if (changes.animateType || changes.color) this.updateValues();
    if (changes.size) {
      switch (this.size) {
        case "small":
          this.fontSize = "12px";
          break;
        case "porletIconSize":
          this.fontSize = "15px";
          break;
        case "medium":
          this.fontSize = "18px";
          break;
        case "large":
          this.fontSize = "32px";
          break;
      }
      this.updateValues();
    }
  }

  updateValues() {
    this.finilizedClasses = this.classes;

    if (!this.activateOnHover || this.activateOnHover == "false" || this.mouseHover) {
      if (this.animateType) this.finilizedClasses += ' animated ' + this.animateType;
      this.updateColor();
    }
    else {
      this.updateColor();
    }
  }

  updateColor() {
    switch (this.color) {
      case "red":
        this.finilizedColor = "orangered";
        break;
      case "green":
        this.finilizedColor = "#6ab025";
        break;
      case "blue":
        this.finilizedColor = "#4B77BE";
        break;
      case "yellow":
        this.finilizedColor = "#E87E04";
        break;
      case "purple":
        this.finilizedColor = "#8775a7";
        break;
      case "orange":
        this.finilizedColor = "#E87E04";
        break;
      case "darkred":
        this.finilizedColor = "red";
        break;
      default:
        if (this.color) this.finilizedColor = this.color;
        else this.finilizedColor = "black";
        break;
    }
  }
}