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

@Component({
  selector: 'rd-sticker-content',
  template: ''
})
export class StickerContent extends RdComponent implements OnChanges {

  @Input("rd-text") text: string;
  @Input('rd-sub-text') subText: string;
  @Input("rd-text-size") textSize: string = "18px";
  @Input('rd-sub-text-size') subTextSize: string = "11px";
  @Input('rd-color') bgColor: string = '#e7505a';
  @Input('rd-content-class') contentClass: string = 'col-md-4';

  ngOnChanges(changes) {
    switch (changes.bgColor.currentValue) {
      case 'red': this.bgColor = '#e7505a'; break;
      case 'green': this.bgColor = '#70d2a1'; break;
      case 'blue': this.bgColor = '#3598dc'; break;
      case 'yellow': this.bgColor = "#E87E04"; break;
    }
  }
}

@Component({
  selector: 'rd-sticker',
  template: `
    <div class="pricing-content-1">
      <div [class]="item.contentClass" [ngStyle]="{'padding':customStyle ? '0' : '0px 15px', 'margin':customStyle ? '0 auto' : 'inherit'}"
        *ngFor="let item of contents._results">
        <div class="price-column-container">
          <div class="price-table-head" [ngStyle]="{'background-color':item.bgColor}">
            <h2 class="no-margin"  [style.font-size]="item.textSize">{{item.text}}</h2>
          </div>
          <div class="arrow-down"></div>
          <div class="uppercase" [style.font-size]="item.subTextSize" style="margin:7px;color:#333;text-shadow:0 0 1px">{{item.subText}}</div>
        </div>
      </div>
    </div>
  `
})
export class Sticker extends RdComponent {
  @Input('rd-custom-style') customStyle = true;
  @ContentChildren(StickerContent) contents;
}