import Component from '@glimmer/component';
import { Utils, ClassBuilder } from 'ember-material-tailwind/utils/class-builder';
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';

/**
A Chip component

|Property|Type|description|
|---|---|---|
|color|string||
|disabled|boolean||
|outlined|boolean||
|selected|boolean||

  @class EmtChip
  @public
*/

interface EmtChipArgs {
  color: string
  disabled: boolean
  outlined: boolean
  selected: boolean
}

export default class EmtChip extends Component<EmtChipArgs> {
  @service theme!:ThemeService;

  private _builder: ClassBuilder;
  private _utils: Utils;
  private _default = 'relative overflow-hidden flex items-center rounded-full px-2 py-1';

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

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

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

    if (this.args.disabled) {
      this._builder.add(true, 'text-gray-400');
    } else {
      this._builder.add(this.args.selected, this._utils.txt(400));
      this._builder.add(!this.args.selected, 'text-gray-600');
    }

    return this._builder.generate();
  }

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

    if (this.args.disabled) {
      this._builder.add(true, 'text-gray-400');
    } else {
      this._builder.add(this.args.selected, `hover:${this._utils.txt(300)} ${this._utils.txt(400)}`);
      this._builder.add(!this.args.selected, 'hover:text-gray-400 text-gray-500');
    }

    return this._builder.generate();
  }

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

    @field classes
    @type string
  */
  public get classes() : string {
    this._builder.clear();
    this._builder.add(true, this._default);

    if (this.args.disabled) {
      this._builder.add(this.args.outlined, 'border border-gray-400 border-solid text-gray-500');
      this._builder.add(!this.args.outlined, 'bg-gray-100 text-gray-500');
    } else {
      this._builder.add(this.args.outlined, 'bg-transparent border');
      this._builder.add(!this.args.selected, 'border-gray-400 border-solid hover:bg-gray-50');
      this._builder.add(!this.args.outlined && !this.args.selected, 'bg-gray-300');
      this._builder.add(this.args.selected, `${this._utils.border()} ${this._utils.txt()} hover:${this._utils.bg(50)}`);
      this._builder.add(!this.args.outlined && this.args.selected, `${this._utils.bg(100)}`);
    }

    return this._builder.generate();
  }

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