import Component from '@glimmer/component';
import { inject as service } from '@ember/service'
import ThemeService from 'ember-material-tailwind/services/theme';
import { action } from '@ember/object';
import { createRipple } from 'ember-material-tailwind/utils/ripple';
import { ClassBuilder, Utils } from 'ember-material-tailwind/utils/class-builder';

interface EmtRadioGroupArgs {
  disabled: boolean
  color: string
  value: any
  selected: any
}

export default class EmtRadioGroup extends Component<EmtRadioGroupArgs> {
  @service theme!:ThemeService;

  private _builder: ClassBuilder;
  private _utils: Utils;


  constructor(owner: unknown, args: EmtRadioGroupArgs) {
    super(owner, args);

    this._builder = new ClassBuilder();
    this._utils = new Utils(this.theme.getColor(this.args.color));
  }

  /**
    Provides the tailwind classes depending on the button type

    @field classes
    @type string
  */
  public get classes() : string {
    const isIndeterminate = this.args.value === null;

    this._builder.clear();

    if (this.args.disabled) {
      this._builder.add(true, 'text-gray-500');
    } else {
      this._builder.add((this.args.value || isIndeterminate), this._utils.txt());
      this._builder.add(!this.args.value && !isIndeterminate, 'text-gray-600');
    }

    return this._builder.generate();
  }

  @action public onPress(event: MouseEvent|TouchEvent) {
    if (!this.args.disabled) {
      createRipple(event, true);
    }
  }
}