import validate from 'validate.js';

interface ErrorObject {
  [fieldId: string]: string[]
}

export default class ValidationHandler {
  private fieldElements: HTMLCollectionOf<HTMLInputElement>;
  private errors: ErrorObject;

  constructor(className: string) {
    this.fields = className;
  }

  validateForm(constraints: object) {
    return new Promise((resolve, reject) => {
      // Use validate.js to create an obejct of errors.
      const errors = validate(this.fieldValues, constraints);
      console.log(this.fieldValues)
      if (!errors) {
        resolve();
      } else {
        this.errors = errors;
        reject();
      }
    });
  }

  refreshErrorMessages() {
    // Loop through the keys of the errors and for each one
    // create a new wrror message.
    for (const errorField in this.errors) {
      const inputField = this.fieldElements.namedItem(errorField);

      if (!inputField) {
        throw Error(`Input tag with id '${errorField}' not found`)
      }

      const message = this.errors[errorField][0];
      this._createErrorMessage(inputField, message);
    }

    for (const fieldName of Object.keys(this.fieldValues)) {
      if (Object.keys(this.errors).indexOf(fieldName) === -1) {
        this._removeErrorMessage(this.fieldElements.namedItem(fieldName));
      }
    }
  }

  private get fieldValues() {
    // Turn into a normal array so we can iterate over it.
    const elementArray = Array.from(this.fieldElements);

    return elementArray.reduce((fields, field) => {
      return {
        ...fields,
        [field.id]: field.value
      };
    }, {});
  }

  private set fields(className: string) {
    // Using the class we can get all the form inputs automatically.
    const elements = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName(className);
    this.fieldElements = elements;
  }


  private _createErrorMessage(inputField: HTMLInputElement, message: string) {
    // The actual error message will be the input's sibling.
    let errorMessageElement = inputField.nextElementSibling;
    // If we've already created the element we just need to
    // update the text, assuming it's a different error.
    if (errorMessageElement) {
      if (errorMessageElement.textContent !== message) {
        errorMessageElement.textContent = message;
      }
    } else {
      // Otherwise create it from scratch.
      errorMessageElement = document.createElement('span');
      errorMessageElement.appendChild(document.createTextNode(message));
      errorMessageElement.classList.add('message', 'message__error');
      inputField.insertAdjacentElement('afterend', errorMessageElement);
    }
  }

  private _removeErrorMessage(inputField: HTMLInputElement) {
    const errorMessageElement = inputField.nextElementSibling;
    if (errorMessageElement) {
      errorMessageElement.remove();
    }
  }
}