import { helper } from '@ember/component/helper';
import { tracked } from '@glimmer/tracking';

export class TrackedState {
  @tracked value;

  set = (value) => (this.value = value);
  toggle = () => this.set(!this.value);
  inc = (count = 1) => this.set(this.count + count);
  dec = (count = 1) => this.set(this.count - count);

  get count() {
    return Number(this.value ?? 0);
  }

  get is() {
    return { [String(this.value)]: true };
  }

  constructor(initialValue) {
    this.value = initialValue;
  }
}

export default helper(([value]) => new TrackedState(value));

{{#let (tracked-state) as |token|}}
  <span>{{if token.value "ON" "OFF"}}</span>
  <button type="button" {{on "click" token.toggle}}>
    Toggle
  </button>
{{/let}}

{{#let (tracked-state) as |token|}}
  <span>{{token.count}}</span>
  <button type="button" {{on "click" token.inc}}>+</button>
  <button type="button" {{on "click" token.dec}}>-</button>
{{/let}}

{{#let (tracked-state "red") as |token|}}
  {{#if token.is.red}}
    <button type="button"
      {{on "click" (fn token.set "green")}}>
      <img src="red-light.png">
    </button>
  {{else if token.is.yellow}}
    <button type="button"
      {{on "click" (fn token.set "red")}}>
      <img src="yellow-light.png">
    </button>
  {{else if token.is.green}}
    <button type="button"
      {{on "click" (fn token.set "yellow")}}>
      <img src="green-light.png">
    </button>
  {{/if}}
{{/let}}