import { bindable, customElement, inlineView } from "aurelia-framework";

let tabSeed: number = 0;

@customElement("ui-tab")
@inlineView(
  `<template class="ui-tab" data-active.bind="active" data-hide.bind="!!view || !!viewModel">
    <slot></slot>
  </template>`
)
export class UITab {
  @bindable()
  public id: string = "";
  @bindable()
  public label: string = "";
  @bindable()
  public tooltip: string = "";
  @bindable()
  public icon: string = "";
  @bindable()
  public active: boolean = false;
  @bindable()
  public disabled: boolean = false;

  @bindable()
  public view: AnyObject;
  @bindable()
  public model: AnyObject;
  @bindable()
  public viewModel: AnyObject;

  @bindable()
  public backgroundColor: string;
  @bindable()
  public textColor: string;
  @bindable()
  public classes: string;

  @bindable()
  public closeable: boolean = false;

  private styleObject: AnyObject = null;

  constructor(protected element: Element) {
    this.id = `tab__${tabSeed++}`;
  }

  protected bind() {
    this.closeable = !isFalse(this.closeable);
    this.resetColors();
  }

  private resetColors() {
    this.styleObject = {};
    if (this.backgroundColor != null) {
      this.styleObject['background-color'] = this.backgroundColor;
    }
    if (this.textColor != null) {
      this.styleObject['color'] = this.textColor;
    }
  }

  textColorChanged() {
    this.resetColors();
  }

  backgroundColorChanged() {
    this.resetColors();
  }
}
