import { UITag } from './../buttons/ui-tag';
import { bindable, bindingMode, containerless, customElement, inlineView } from "aurelia-framework";

@customElement("ui-tag-check")
@inlineView(
  `<template><div click.trigger="toggleTag()"><ui-tag size="\${size}" label.bind="label"
  background-color="\${selected == true ? selectedBackgroundColor :backgroundColor}"
  text-color="\${selected == true ? selectedTextColor:textColor}" clickable.one-time="true"></ui-tag><div></template>`
)
export class UITagCheck extends UITag {
  @bindable()
  public textColor: string = 'white';
  @bindable()
  public backgroundColor: string = 'red';
  @bindable()
  public selectedTextColor: string = 'white';
  @bindable()
  public selectedBackgroundColor: string = 'green';
  @bindable({ defaultBindingMode: bindingMode.twoWay })
  public selected: boolean;

  public toggleTag() {
    this.selected = !this.selected;
  }
}
