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

/**
An Icon child component for EmtTextField

|Property|Type|description|
|---|---|---|
|icon|string||

  @class EmtTextField.Icon
  @public
*/

interface IconArgs {
  icon: string
  focused: boolean
  color: string
  prefixIcon: boolean
}

export default class Icon extends Component<IconArgs> {
  @service theme!:ThemeService;

  private _suffixDefault = "absolute right-0 top-0 pb-2 pr-4 pt-4 text-gray-700 z-10";
  private _prefixDefault = "absolute left-0 top-0 pb-2 pl-2 pt-4 text-xs text-gray-700 z-10";


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

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

    @field classes
    @type string
  */
  public get classes() : string {
    const builder = new ClassBuilder();
    const utils = new Utils(this.theme.getColor(this.args.color));
    builder.add(this.args.prefixIcon, this._prefixDefault);
    builder.add(!this.args.prefixIcon, this._suffixDefault);
    builder.add(this.args.focused, utils.txt());

    return builder.generate();
  }
}