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

export type TimelineColors = "red" | "green" | "blue" | "yellow" | "purple";

@Component({
  selector: 'rd-timeline-content',
  template: `
    <div class="m-timeline-2__item m--margin-top-20">
      <span class="m-timeline-2__item-time" style="margin-left:5rem">{{time}}</span>
      <div class="m-timeline-2__item-cricle" style="margin-left:-14px">
        <i [ngClass]="[icon,colorClass]"></i>
      </div>
      <div class="m-timeline-2__item-text m--padding-top-5">
        <ng-content></ng-content>
      </div>
    </div>
  `
})
export class TimelineContent extends RdComponent implements OnInit {
  @Input('rd-icon') icon: string = "fa fa-genderless";
  @Input('rd-color') color: TimelineColors;
  @Input('rd-time') time: number | string;

  colorClass;

  ngOnInit() {
    switch (this.color) {
      case 'red': this.colorClass = "m--font-danger"; break;
      case 'green': this.colorClass = "m--font-success"; break;
      case 'blue': this.colorClass = "m--font-info"; break;
      case 'yellow': this.colorClass = "m--font-warning"; break;
      case 'purple': this.colorClass = "m--font-brand"; break;
    }
  }
}

@Component({
  selector: 'rd-timeline',
  template: `
    <div class="m-timeline-2 col-lg-12">
      <div class="m-timeline-2__items m--padding-top-5">
        <ng-content></ng-content>
      </div>
    </div>
  `
})
export class Timeline extends RdComponent {

}