/**
 * @file
 * Provides date format preview feature.
 */

(function ($, Drupal, drupalSettings) {

  'use strict';

  var dateFormats = drupalSettings.dateFormats;

  /**
   * Display the preview for date format entered.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attach behavior for previewing date formats on input elements.
   */
  Drupal.behaviors.dateFormat = {
    attach: function (context) {
      var $context = $(context);
      var $source = $context.find('[data-drupal-date-formatter="source"]').once('dateFormat');
      var $target = $context.find('[data-drupal-date-formatter="preview"]').once('dateFormat');
      var $preview = $target.find('em');

      // All elements have to exist.
      if (!$source.length || !$target.length) {
        return;
      }

      /**
       * Event handler that replaces date characters with value.
       *
       * @param {jQuery.Event} e
       *   The jQuery event triggered.
       */
      function dateFormatHandler(e) {
        var baseValue = $(e.target).val() || '';
        var dateString = baseValue.replace(/\\?(.?)/gi, function (key, value) {
          return dateFormats[key] ? dateFormats[key] : value;
        });

        $preview.html(dateString);
        $target.toggleClass('js-hide', !dateString.length);
      }

      /**
       * On given event triggers the date character replacement.
       */
      $source.on('keyup.dateFormat change.dateFormat input.dateFormat', dateFormatHandler)
        // Initialize preview.
        .trigger('keyup');
    }
  };

})(jQuery, Drupal, drupalSettings);