import { autoinject, bindable, customAttribute } from "aurelia-framework";
import { Config } from "../config";
import { UIInternal } from "../utils/ui-internal";

@autoinject()
@customAttribute("ui-badge")
export class UIBadge {
  /**
   * Badge value
   * `ui-badge="9"`
   */
  @bindable({ primaryProperty: true })
  protected value: string = "";

  /**
   * Badge icon
   * `ui-badge.bind="{icon:''; value:''}`
   */
  @bindable()
  protected icon: string = "";

  /**
   * Badge theme
   * `ui-badge.bind="{theme:''; value:''}`
   */
  @bindable()
  protected theme: string = "";

  /**
   * Badge tooltip
   * `ui-badge.bind="{tooltip:''; value:''}`
   */
  @bindable()
  protected tooltip: string = "";


  /**
   * Badge position
   * `ui-badge.bind="{position:''; value:''}`
   */
  @bindable()
  protected position: "top" | "bottom" = "top";

  constructor(protected element: Element, private config: Config) {
    this.position = this.config.globalConfig.uiBagdeDisplay;
  }

  protected attached(): void {
    if (this.value != null || this.icon) {
      const vm = getViewModel(this.element);
      const view = UIInternal.compileTemplate(
        `<template><div class="ui-badge ui-badge__\${position}" ui-theme.bind="theme" ui-tooltip.bind="tooltip">
        <ui-icon icon.bind="icon" if.bind="icon"></ui-icon>\${value}
      </div></template>`,
        this
      );
      (vm ? (vm.badgeEl ? vm.badgeEl : vm.vmElement) : this.element).appendChild(view.fragment);
      view.attached();
    }
  }
}
