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

/**
A label child component for EmtTextField

  @class EmtTextField.Label
  @public
*/

interface LabelArgs {
  labelOnTop: boolean
  focused: boolean
  error: boolean
  outlined: boolean
  prefixIcon: boolean
  color: string
  dense: boolean
}

export default class Label extends Component<LabelArgs> {
  @service theme!:ThemeService;

  private _labelDefault = `pt-4 absolute top-0 label-transition block pb-2 px-4 pointer-events-none cursor-text`;

  constructor(owner: unknown, args: LabelArgs) {
    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._labelDefault);
    builder.add(this.args.focused && !this.args.error, utils.txt());
    builder.add(this.args.error, `text-${this.theme.error}-500`);
    builder.add(this.args.labelOnTop, 'label-top text-xs');
    builder.add(this.args.focused, 'text-xs');
    builder.remove(this.args.labelOnTop && this.args.outlined, 'pt-4 pb-2 px-4 px-1 pt-0');
    builder.add(this.args.labelOnTop && this.args.outlined, 'ml-3 p-1 pt-0 mt-0 bg-white');
    builder.remove(this.args.prefixIcon, 'px-4');
    builder.add(this.args.prefixIcon, 'pr-4 pl-10');
    builder.remove(this.args.dense, 'pt-4');
    builder.add(this.args.dense, 'pt-3');

    return builder.generate();
  }
}