import Component from '@glimmer/component';
import Inputmask from 'inputmask';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

const DEFAULT_OPTIONS = {
  rightAlign: false,
};

// TODO: must be tested or replaced by ember-input-mask version when this issue was closed
// https://github.com/brandynbennett/ember-inputmask/issues/143
export default class FormsInputMaskComponent extends Component {
  @tracked inputmask;

  @action setupMask(element) {
    let options = { ...DEFAULT_OPTIONS, ...this.args.options };

    this.inputmask = new Inputmask(this.args.mask, options);
    this.inputmask.mask(element);
  }

  @action processNewValue({ target }) {
    let cursorStart = target.selectionStart;
    let cursorEnd = target.selectionEnd;

    this.sendUpdate(target.inputmask.unmaskedvalue(), target.value);

    target.setSelectionRange(cursorStart, cursorEnd);
  }

  sendUpdate(unmaskedValue, value) {
    this.args.update && this.args.update(unmaskedValue, value);
  }

  willDestroy() {
    this.inputmask.remove();
  }
}