//  bootstrap-form-validation-renderer.js

export class BootstrapFormValidationRenderer {

  render(instruction) {
    for (let { result, elements } of instruction.unrender) {
      for (let element of elements) {
        this.remove(result, element)
      }
    }

    for (let { result, elements } of instruction.render) {
      for (let element of elements) {
        this.add(result, element)
      }
    }
  }

  remove(result, element) {
    const formGroup = element.closest('.form-group');
    if (!formGroup) {
      return;
    }

    const message = formGroup.querySelector('#bs-validation-message-' + result.id);
    // also works:    const message = formGroup.querySelector(`#bs-validation-message-${result.id}`);

    // doesn't work:  const message = formGroup.querySelector('#bs-validation-message-${result.id}');
    // doesn't work:  const message = formGroup.querySelector('"bs-validation-message-" + result.id');

    if (message) {
      element.parentNode.removeChild(message);
      if (formGroup.querySelectorAll('.help-block.validation-message').length === 0) {
        formGroup.classList.remove('has-error');
      }
    }
  }

  add(result, element) {
    const formGroup = element.closest('.form-group');
    if (result.valid) {
      return;
    }

    formGroup.classList.add('has-error');

    const message = document.createElement('span');
    message.id = "bs-validation-message-" + result.id;
    message.className = 'help-block validation-message';
    message.textContent = result.message;
    element.parentNode.insertBefore(message, element.nextSibling);
  }

}