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';

/**
A a Switch child component for EmtSwitch component

  @class EmtSwitch.switch
  @public
*/

interface SwitchArgs {
  disabled: boolean
  color: string
  value: any
}

export default class Switch extends Component<SwitchArgs> {
  @service theme!: ThemeService;

  private _builder: ClassBuilder;
  private _utils: Utils;


  constructor(owner: unknown, args: SwitchArgs) {
    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 {
    this._builder.clear();

    if (this.args.disabled) {
      this._builder.add(this.args.disabled, 'bg-gray-500');
    } else {
      this._builder.add(this.args.value, this._utils.bg(200));
      this._builder.add(!this.args.value, 'bg-gray-700');
    }

    return this._builder.generate();
  }

  public get thumbClasses(): string {
    this._builder.clear();

    if (this.args.disabled) {
      this._builder.add(this.args.value, 'bg-gray-300 right-0');
      this._builder.add(!this.args.value, 'bg-gray-300 left-0');
    } else {
      this._builder.add(this.args.value, `${this._utils.bg()} right-0`);
      this._builder.add(!this.args.value, 'bg-white left-0');
    }

    return this._builder.generate();
  }

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