/**
 * @file
 * Polyfill for HTML5 date input.
 */

(function($, Modernizr, Drupal) {
  /**
   * Attach datepicker fallback on date elements.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches the behavior. Accepts in `settings.date` an object listing
   *   elements to process, keyed by the HTML ID of the form element containing
   *   the human-readable value. Each element is an datepicker settings object.
   * @prop {Drupal~behaviorDetach} detach
   *   Detach the behavior destroying datepickers on effected elements.
   */
  Drupal.behaviors.date = {
    attach(context, settings) {
      const $context = $(context);
      // Skip if date are supported by the browser.
      if (Modernizr.inputtypes.date === true) {
        return;
      }
      $context
        .find('input[data-drupal-date-format]')
        .once('datePicker')
        .each(function() {
          const $input = $(this);
          const datepickerSettings = {};
          const dateFormat = $input.data('drupalDateFormat');
          // The date format is saved in PHP style, we need to convert to jQuery
          // datepicker.
          datepickerSettings.dateFormat = dateFormat
            .replace('Y', 'yy')
            .replace('m', 'mm')
            .replace('d', 'dd');
          // Add min and max date if set on the input.
          if ($input.attr('min')) {
            datepickerSettings.minDate = $input.attr('min');
          }
          if ($input.attr('max')) {
            datepickerSettings.maxDate = $input.attr('max');
          }
          $input.datepicker(datepickerSettings);
        });
    },
    detach(context, settings, trigger) {
      if (trigger === 'unload') {
        $(context)
          .find('input[data-drupal-date-format]')
          .findOnce('datePicker')
          .datepicker('destroy');
      }
    },
  };
})(jQuery, Modernizr, Drupal);