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

/**
An Input child component for EmtTextField

  @class EmtTextField.Input
  @public
*/

interface InputArgs {
  color: string
  dense: boolean
  disabled: boolean
  error: boolean
  focused: boolean
  outlined: boolean
  placeholder: string
  prefixIcon: boolean
  hasValueInput(value: boolean):void
  setFocused(value: boolean): void
}

export default class Input extends Component<InputArgs> {
  @service theme!:ThemeService;

  private _default = `duration-200 ease-in pb-2 pt-6 px-4 rounded-t text-black dark:text-gray-100 w-full`;

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

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

    @field classes
    @type string
  */
  public get classes() {
    const utils = new Utils(this.theme.getColor(this.args.color));
    const builder = new ClassBuilder();

    builder.add(true, this._default);
    builder.remove(this.args.outlined, 'pt-6 pb-2');
    builder.add(this.args.outlined, 'border rounded bg-transparent py-4 duration-200 ease-in');
    builder.add(this.args.error, `border-${this.theme.error}-500 caret-${this.theme.error}-500`);
    builder.remove(this.args.error, utils.caret());
    builder.add(!this.args.error, utils.caret());
    builder.add(this.args.focused && !this.args.error, utils.border());
    builder.add(!this.args.focused && !this.args.error, 'border-gray-600');
    builder.add(!this.args.outlined, 'bg-gray-100');
    builder.add(this.args.focused && !this.args.outlined, 'bg-gray-300');
    builder.remove(this.args.prefixIcon, 'px-4');
    builder.add(this.args.prefixIcon, 'pr-4 pl-10');
    builder.remove(this.args.dense && !this.args.outlined, 'pt-6 pb-2');
    builder.add(this.args.dense && !this.args.outlined, 'pt-4 pb-1');
    builder.remove(this.args.disabled, 'bg-gray-100');
    builder.add(this.args.disabled, 'bg-gray-50');

    return builder.generate();
  }

  @action public onFocus(value: boolean) {
    this.args.setFocused(value);
  }

  @action public onInput(event: InputEvent) {
    let el = <HTMLInputElement> event.target;
    this.args.hasValueInput(el.value ? true : false);
  }

  @action public onUpdate(el: HTMLInputElement) {
    this.args.hasValueInput(el.value ? true : false);
  }
}