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

declare const format;

export type ValueTypes = 'text' | 'bool' | 'number' | 'decimal' | 'select' | 'date' | 'password';
@Component({
  selector: "rd-value",
  template: `
    <span *ngIf="model == undefined || model == null">
      <i class="fas fa-minus"  style="color:red" [rd-tooltip]="RdLib.localization.translateEn('No item to show')"></i>
    </span>
    <div *ngIf="model != undefined && model != null" style="display:inline-block">
      <span *ngIf="type == 'bool' && format == 'icon'">
        <i class="fas fa-check" *ngIf="model && model !='false' && model != '0'" style="color:green"></i>
        <i class="fas fa-times" *ngIf="!model" style="color:crimson"></i>
      </span>
      <span *ngIf="((model  || model == 0) && type && format != 'badge')" [style.color]="color">
        <ng-container *ngIf="format != 'html'">{{display}}</ng-container>
        <span *ngIf="format == 'html'" [innerHTML]="display"></span>
      </span>
      <rd-badge [rd-level]="model" *ngIf="((model || model == 0) && type && format == 'badge')">
        {{display}}
      </rd-badge>
      <span *ngIf="display == undefined">
       <i class="fas fa-exclamation-circle" style="color:red" [rd-tooltip]="RdLib.localization.translateEn('Invalid Data')"></i>
      </span>
    </div>
  `
})
export class Value extends RdComponent {

  @Input("rd-model") model: any;
  @Input("rd-type") type: ValueTypes;
  @Input("rd-format") format: string;
  @Input("rd-color") color: string = "#333";

  @Input("rd-select-key") selectKey;
  @Input("rd-select-value") selectValue;
  @Input("rd-select-items") selectItems;

  display = '';
  RdLib = RdLib;

  ngOnChanges(changes) {
    switch (this.type) {
      case "text":
        this.display = this.model;
        break;
      case "bool":
        if (this.format != 'icon') this.display = RdLib.typeOperations.boolToString(this.model);
        break;
      case "number":
        this.format = this.format || '0.###';
        this.display = format(this.format, this.model);
        // this.display = RdLib.typeOperations.decimalToString(this.model, this.format);
        break;
      case "decimal":
        this.format = this.format || '#.##0,###';
        this.display = format(this.format, this.model);
        break;
      case "select":
        if ((this.model || this.model == 0) && this.selectItems && this.selectItems.length) {
          for (let item of this.selectItems) {
            if (item[this.selectKey] == this.model) this.display = item[this.selectValue];
          }
          //when model has no include in selectItems
          if (!this.display) this.display = this.model;
        }
        break;
      case "date":
        this.format = this.format || 'time';
        this.display = RdLib.typeOperations.longToString(this.model, this.format);
        break;
      case "password":
        this.display = this.model.replace(/./g, "*");
        break;
      default:
        this.error("Invalid type: '" + this.type + "'");
        break;
    }
  }

}