export default class WsMultipleInputController {
  static $inject = ['$window', '$timeout'];

  constructor($window, $timeout) {
    this.$window = $window;
    this.$timeout = $timeout;
  }

  $onInit() {
    this.inputCount = parseInt(this.numberOfInputs, 10);
    this.model = {
      inputs: [],
    };
  }

  range = n => new Array(n);

  onKeyPress = ($event) => {
    if (this.isReadonly) {
      return Promise.resolve();
    }

    return this.$timeout(() => {
      // When maximum length is reached for current input, not counting movements
      if ($event.target.value.length === $event.target.maxLength && !($event.key === 'ArrowLeft' || $event.key === 'ArrowRight')) {
        const inputs = this.model.inputs;
        const populated = inputs.filter(input => (angular.isString(input) && input.length > 0)
                                                 || angular.isNumber(input));
        // If all inputs have been populated, calls onCompleted
        // Otherwise, move to next input
        if (populated.length === this.inputCount) {
          const finalInput = inputs.join('');
          this.onCompleted({ result: finalInput });
        } else if ($event.target.nextElementSibling !== null) {
          $event.target.nextElementSibling.focus();
        }
      }
    });
  };

  onKeyDown = ($event) => {
    if (this.isReadonly) {
      return;
    }

    // Browsers have a hard time limiting input for <input type="number">
    if (($event.target.value.length > 0 && $event.keyCode >= 48
         && !$event.altKey && !$event.ctrlKey && !$event.metaKey)) {
      $event.preventDefault();
    }

    // When trying to delete from an empty input, delete from the previous one
    if (($event.target.value.length === 0) && ($event.key === 'Backspace')) {
      if ($event.target.previousElementSibling !== null) {
        $event.preventDefault();
        $event.target.previousElementSibling.focus();
        $event.target.previousElementSibling.value = '';
      }
    }
    if ($event.key === 'ArrowLeft') {
      if ($event.target.previousElementSibling !== null) {
        $event.preventDefault();
        $event.target.previousElementSibling.focus();
      }
    }
    if ($event.key === 'ArrowRight') {
      if ($event.target.nextElementSibling !== null) {
        $event.preventDefault();
        $event.target.nextElementSibling.focus();
      }
    }
  };

  onPaste = ($event) => {
    $event.preventDefault();

    // jQuery's doesn't expose Clipboard API
    const clipboardData = ($event.originalEvent.clipboardData || this.$window.clipboardData);
    const pasteData = clipboardData.getData('Text');

    let splitData = pasteData.slice(0, this.inputCount).split('');
    if (this.isNumeric) {
      splitData = splitData.map(char => parseInt(char, 10))
                           .filter(digit => !isNaN(digit));
    }

    this.model.inputs = splitData;

    // Because the paste filled all inputs we fire onCompleted
    if (splitData.length === this.inputCount) {
      this.onCompleted({ result: this.model.inputs.join('') });
    }
  };
}
