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

interface UnderlineArgs {
  color: string
  outlined: boolean
  focused: boolean
  error: boolean
}

export default class Underline extends Component<UnderlineArgs> {
  @service theme!:ThemeService;

  private _underlineDefault = `mx-auto w-0`;

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

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

    @field classes
    @type string
  */
  public get classes() : string {

    const utils = new Utils(this.theme.getColor(this.args.color));
    const builder = new ClassBuilder();

    builder.add(true, this._underlineDefault);
    builder.add(this.args.focused && !this.args.error, utils.txt());
    builder.add(this.args.error, `bg-${this.theme.error}-500`);
    builder.add(this.args.focused || this.args.error, 'w-full');
    builder.add(this.args.focused && !this.args.error, utils.bg());
    builder.add(this.args.focused && this.args.error, `bg-${this.theme.error}-500`);

    return builder.generate();
  }
}