/**
 * @file
 * Javascript behaviors for custom webform #states.
 */

(function ($, Drupal) {

  'use strict';

  // Make absolutely sure the below event handlers are triggered after
  // the /core/misc/states.js event handlers by attaching them after DOM load.
  $(function () {
    var $document = $(document);
    $document.on('state:visible', function (e) {
      if (!e.trigger) {
        return TRUE;
      }

      if (!e.value) {
        // @see https://www.sitepoint.com/jquery-function-clear-form-data/
        $(':input', e.target).andSelf().each(function () {
          var $input = $(this);
          backupValueAndRequired(this);
          clearValueAndRequired(this);
          triggerEventHandlers(this);
        });
      }
      else {
        $(':input', e.target).andSelf().each(function () {
          restoreValueAndRequired(this);
          triggerEventHandlers(this);
        });
      }
    });

    $document.on('state:disabled', function (e) {
      if (e.trigger) {
        $(e.target).trigger('webform:disabled')
          .find('select, input, textarea').trigger('webform:disabled');
      }
    });
  });

  /**
   * Trigger an input's event handlers.
   *
   * @param input
   *   An input.
   */
  function triggerEventHandlers(input) {
    var $input = $(input);
    var type = input.type;
    var tag = input.tagName.toLowerCase(); // Normalize case.
    if (type == 'checkbox' || type == 'radio') {
      $input
        .trigger('change')
        .trigger('blur');
    }
    else if (tag == 'select') {
      $input
        .trigger('change')
        .trigger('blur');
    }
    else if (type != 'submit' && type != 'button') {
      $input
        .trigger('input')
        .trigger('change')
        .trigger('keydown')
        .trigger('keyup')
        .trigger('blur');
    }
  }

  /**
   * Backup an input's current value and required attribute
   *
   * @param input
   *   An input.
   */
  function backupValueAndRequired(input) {
    var $input = $(input);
    var type = input.type;
    var tag = input.tagName.toLowerCase(); // Normalize case.

    // Backup required.
    if ($input.prop('required')) {
      $input.data('webform-require', true);
    }

    // Backup value.
    if (type == 'checkbox' || type == 'radio') {
      $input.data('webform-value', $input.prop('checked'));
    }
    else if (tag == 'select') {
      var values = [];
      $input.find('option:selected').each(function (i, option) {
        values[i] = option.value;
      });
      $input.data('webform-value', values);
    }
    else if (type != 'submit' && type != 'button') {
      $input.data('webform-value', input.value);
    }

  }

  /**
   * Restore an input's value and required attribute.
   *
   * @param input
   *   An input.
   */
  function restoreValueAndRequired(input) {
    var $input = $(input);

    // Restore value.
    var value = $input.data('webform-value');
    if (typeof value !== 'undefined') {
      var type = input.type;
      var tag = input.tagName.toLowerCase(); // Normalize case.

      if (type == 'checkbox' || type == 'radio') {
        $input.prop('checked', value)
      }
      else if (tag == 'select') {
        $.each(value, function (i, option_value) {
          $input.find("option[value='" + option_value + "']").prop("selected", true);
        });
      }
      else if (type != 'submit' && type != 'button') {
        input.value = value;
      }
    }

    // Restore required.
    if ($input.data('webform-required')) {
      $input.prop('required', TRUE);
    }
  }

  /**
   * Clear an input's value and required attributes.
   *
   * @param input
   *   An input.
   */
  function clearValueAndRequired(input) {
    var $input = $(input);

    // Clear value.
    var type = input.type;
    var tag = input.tagName.toLowerCase(); // Normalize case.
    if (type == 'checkbox' || type == 'radio') {
      $input.prop('checked', false);
    }
    else if (tag == 'select') {
      if ($input.find('option[value=""]').length) {
        $input.val('');
      }
      else {
        input.selectedIndex = -1;
      }
    }
    else if (type != 'submit' && type != 'button') {
      input.value = (type == 'color') ? '#000000' : '';
    }

    // Clear required.
    $input.prop('required', false);
  }

})(jQuery, Drupal);