(function ($) {
  $(document).ready(function() {
    let fields = document.querySelectorAll('[data-value-state]');

    // Run through all elements that use the custom data-value-state
    fields.forEach(function(item) {
      let original_value = item.value;
      let value_states = JSON.parse(item.getAttribute('data-value-state'));

      // Run through each condition
      for (let key in value_states) {
        // skip loop if the property is from prototype
        if (!value_states.hasOwnProperty(key)) {
          continue;
        }

        let condition = value_states[key];
        let split_selector = key.split('|');
        let value = split_selector[1];
        let selector = split_selector[0];

        $(selector).on('change keyup click', function() {
          updateField(selector, condition, original_value, value, item);
        });

        $(document).ready(function() {
          updateField(selector, condition, original_value, value, item);
        });
      }
    });

    function updateField(selector, condition, original_value, value, item) {
      let condition_key = Object.keys(condition)[0];
      let condition_value = condition[condition_key];
      let field = $(selector).get(0);

      switch (condition_key) {
        case 'empty':
          if (isEmpty(field.value)) {
            setItemValue(item, value);
          }
          break;
        case 'filled':
          if (!isEmpty(field.value)) {
            setItemValue(item, value);
          }
          break;
        case 'checked':
          if (field.checked) {
            setItemValue(item, value);
          }
          break;
        case 'unchecked':
          if (!field.checked) {
            setItemValue(item, value);
          }
          break;
        case 'expanded':
          setTimeout(function() {
            let parent = field.parentElement;
            if (parent.hasAttribute('open')) {
              setItemValue(item, value);
            }
          }, 20);
          break;
        case 'collapsed':
          setTimeout(function() {
            let parent = field.parentElement;
            if (!parent.hasAttribute('open')) {
              setItemValue(item, value);
            }
          }, 20);
          break;
        case 'value':
          if (field.type === 'radio') {
            field = $(selector + '[value="' + condition_value + '"]').get(0);
            if (field.checked) {
              setItemValue(item, value);
            }
          } else {
            if (field.value === condition_value) {
              setItemValue(item, value);
            }
          }
          break;
        case '!value':
          if (field.type === 'radio') {
            field = $(selector + '[value="' + condition_value + '"]').get(0);
            if (!field.checked) {
              setItemValue(item, value);
            }
          } else {
            if (field.value !== condition_value) {
              setItemValue(item, value);
            }
          }
          break;
        case 'pattern':
          if (((field.value || '').match(condition_value) || []).length > 0) {
            setItemValue(item, value);
          }
          break;
        case '!pattern':
          if (((field.value || '').match(condition_value) || []).length < 0) {
            setItemValue(item, value);
          }
          break;
        case 'less':
          if (parseInt(field.value) < parseInt(condition_value)) {
            setItemValue(item, value);
          }
          break;
        case 'greater':
          if (parseInt(field.value) > parseInt(condition_value)) {
            setItemValue(item, value);
          }
          break;
      }
    }

    function setItemValue(item, value) {
      let event = new Event('change', { bubbles: true });

      if ((item.type === 'radio')) {
        // We need to make sure the radio value matches what we want to select.
        if (item.value === value) {
          item.checked = "checked";
        }
      }
      else if (item.type === 'checkbox') {
        // Allow checking multiple checkboxes.
        let split_value = value.split(",");
        if (split_value.indexOf(item.value) !== -1) {
          item.checked = "checked";
        }
      }
      else if (item.tagName.toLowerCase() === 'button') {
        item.textContent = value;
      }
      else {
        item.value = value;
      }

      item.dispatchEvent(event);
    }

    // Simple function to check if string is empty, will also consider whitespaces as empty.
    function isEmpty(str){
      return !str.replace(/\s+/, '').length;
    }
  });
})(jQuery);