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

/**
A Hint child component for EmtTextField

|Property|Type|description|
|---|---|---|
|persistentHint|boolean||

  @class EmtTextField.Hint
  @public
*/

interface HintArgs {
  error: boolean
  focused: boolean
  hint: string
  persistentHint: boolean
}

export default class Hint extends Component<HintArgs> {
  @service theme!:ThemeService;

  private _default = `text-xs py-1 pl-4 absolute bottom-1 left-0`;

  constructor(owner: unknown, args: HintArgs) {
    super(owner, args);
  }

  public get showHint() {
    return this.args.error || (this.args.persistentHint ? this.args.hint : this.args.focused && this.args.hint);
  }

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

    @field classes
    @type string
  */
  public get classes() : string {
    const builder = new ClassBuilder();

    builder.add(true, this._default);
    builder.add(this.args.error, `text-${this.theme.error}-500`);
    builder.add(!this.args.error, 'text-gray-600');

    return builder.generate();
  }
}