import { VALIDATION_MESSAGE_PASSWORDS_MATCH } from '../constants';
import { isObject, isString, isArray } from './isType';

const getHelpBlock = (id) => {
  if (isString(id)) {
    return `<span id="${id}" class="help-block" style="display: none;">
            ${VALIDATION_MESSAGE_PASSWORDS_MATCH}</span>`;
  }
  return '';
};

const togglePassword = (password) => {
  $(password).attr('type', ($(password).attr('type') === 'password' ? 'text' : 'password'));
};

const isValid = ((pwd, confirmation) =>
  pwd === confirmation
);

const valid = (el, block) => {
  $(el).attr('aria-invalid', false);
  $(el).parent().removeClass('has-error');
  $(block).hide();
};
const invalid = (el, block) => {
  $(el).attr('aria-invalid', true);
  $(el).parent().addClass('has-error');
  $(block).show();
};

export const addMatchingPasswordValidator = (options) => {
  if (isObject(options) && isString(options.selector)) {
    const id = `${$(options.selector).attr('id')}_password_matcher`;

    const pwd = $(options.selector).find('#user_password');
    const cnf = $(options.selector).find('#user_password_confirmation');
    const sbmt = $(options.selector).find('[type="submit"]');

    if (isObject(pwd) && isObject(cnf) && isObject(sbmt)) {
      if (isValid($(pwd).val(), $(cnf).val())) {
        $(cnf).parent().append(getHelpBlock(id));
        $(cnf).attr('aria-describedby', id);

        $(sbmt).click((e) => {
          if (cnf.val() !== pwd.val()) {
            e.preventDefault();
            invalid(cnf, `#${id}`);
          } else {
            valid(cnf, `#${id}`);
          }
        });
      }
    }
  }
};

/*
 *   This function is expecting your HTML to be in the following format. Only one toggle
 *   is needed per form. It will toggle all password fields within the containing form:
 *     <input type="checkbox" id="passwords_toggle" />
 */
export const togglisePasswords = (options) => {
  if (isObject(options) && isString(options.selector)) {
    const toggle = $(`${options.selector} #passwords_toggle`);
    const pwds = $(`${options.selector} input[type="password"]`);

    if (pwds && toggle) {
      toggle.on('change', () => {
        if (isArray(pwds)) {
          pwds.forEach((pwd) => {
            togglePassword(pwd);
          });
        } else {
          togglePassword(pwds);
        }
      });
    }
  }
};