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

/**
A TextField component

|Property|Type|description|
|---|---|---|
|color|string||
|dense|boolean||
|disabled|boolean||
|error|boolean||
|label|string||
|outlined|boolean||
|placeholder|string||
|prefixIcon|boolean||

  @class EmtTextField
  @public
*/

interface EmtTextFieldArgs {
  color: string
  dense: boolean
  disabled: boolean
  error: boolean
  label: string
  outlined: boolean
  placeholder: string
  prefixIcon: boolean
}

export default class EmtTextField extends Component<EmtTextFieldArgs> {
  @service theme!:ThemeService;

  private _classesDefault = "mt-2 mb-6 relative text-gray-600 dark:text-gray-100";

  @tracked public focused: boolean;
  @tracked public hasValue: boolean;

  constructor(owner: unknown, args: EmtTextFieldArgs) {
    super(owner, args);

    this.hasValue = false;
    this.focused = false;
  }

  public get classes() {
    const builder = new ClassBuilder();

    builder.add(true, this._classesDefault);
    builder.remove(this.args.dense && !this.args.outlined, 'mb-6 mt-2');
    builder.add(this.args.dense, 'mb-4 mt-1');
    builder.replace(this.args.error, 'text-gray-600', 'text-error-500');
    builder.add(this.args.disabled, 'text-gray-200');

    return builder.generate();
  }

  public get labelOnTop() {
    return this.args.placeholder || this.focused || this.hasValue;
  }

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

  @action public onClickAppend() {
    //dispatch("click-append")
  }

  @action public hasValueInput(value: boolean) {
    this.hasValue = value;
  }

  @action public setFocused(value: boolean) {
    this.focused = value;
  }
}