import * as debounce from 'lodash.debounce';
import { Utility } from '../../core/utility';

export const AUTO_SUBMIT_INPUT_UTIL_SELECTOR = '[uw-auto-submit-input]';

const AUTO_SUBMIT_INPUT_INITIALIZED_CLASS = 'auto-submit-input--initialized';

@Utility({
  selector: AUTO_SUBMIT_INPUT_UTIL_SELECTOR,
})
export class AutoSubmitInput {

  _element;

  _form;
  _debouncedHandler;

  constructor(element) {
    if (!element) {
      throw new Error('Auto Submit Input utility needs to be passed an element!');
    }

    this._element = element;

    if (this._element.classList.contains(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS)) {
      return false;
    }

    this._form = this._element.form;
    if (!this._form) {
      throw new Error('Could not determine associated form for auto submit input');
    }

    this._debouncedHandler = debounce(this.autoSubmit, 500);

    this._element.addEventListener('input', this._debouncedHandler);
    this._element.classList.add(AUTO_SUBMIT_INPUT_INITIALIZED_CLASS);
  }

  destroy() {
    this._element.removeEventListener('input', this._debouncedHandler);
  }

  autoSubmit = () => {
    this._form.submit();
  }
}