/**
 * @file
 * Locale admin behavior.
 */

(function($, Drupal) {
  /**
   * Marks changes of translations.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches behavior to show the user if translations has changed.
   * @prop {Drupal~behaviorDetach} detach
   *   Detach behavior to show the user if translations has changed.
   */
  Drupal.behaviors.localeTranslateDirty = {
    attach() {
      const $form = $('#locale-translate-edit-form').once(
        'localetranslatedirty',
      );
      if ($form.length) {
        // Display a notice if any row changed.
        $form.one('formUpdated.localeTranslateDirty', 'table', function() {
          const $marker = $(
            Drupal.theme('localeTranslateChangedWarning'),
          ).hide();
          $(this)
            .addClass('changed')
            .before($marker);
          $marker.fadeIn('slow');
        });
        // Highlight changed row.
        $form.on('formUpdated.localeTranslateDirty', 'tr', function() {
          const $row = $(this);
          const $rowToMark = $row.once('localemark');
          const marker = Drupal.theme('localeTranslateChangedMarker');

          $row.addClass('changed');
          // Add an asterisk only once if row changed.
          if ($rowToMark.length) {
            $rowToMark.find('td:first-child .js-form-item').append(marker);
          }
        });
      }
    },
    detach(context, settings, trigger) {
      if (trigger === 'unload') {
        const $form = $('#locale-translate-edit-form').removeOnce(
          'localetranslatedirty',
        );
        if ($form.length) {
          $form.off('formUpdated.localeTranslateDirty');
        }
      }
    },
  };

  /**
   * Show/hide the description details on Available translation updates page.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches behavior for toggling details on the translation update page.
   */
  Drupal.behaviors.hideUpdateInformation = {
    attach(context, settings) {
      const $table = $('#locale-translation-status-form').once(
        'expand-updates',
      );
      if ($table.length) {
        const $tbodies = $table.find('tbody');

        // Open/close the description details by toggling a tr class.
        $tbodies.on('click keydown', '.description', function(e) {
          if (e.keyCode && (e.keyCode !== 13 && e.keyCode !== 32)) {
            return;
          }
          e.preventDefault();
          const $tr = $(this).closest('tr');

          $tr.toggleClass('expanded');

          // Change screen reader text.
          $tr.find('.locale-translation-update__prefix').text(() => {
            if ($tr.hasClass('expanded')) {
              return Drupal.t('Hide description');
            }

            return Drupal.t('Show description');
          });
        });
        $table.find('.requirements, .links').hide();
      }
    },
  };

  $.extend(
    Drupal.theme,
    /** @lends Drupal.theme */ {
      /**
       * Creates markup for a changed translation marker.
       *
       * @return {string}
       *   Markup for the marker.
       */
      localeTranslateChangedMarker() {
        return `<abbr class="warning ajax-changed" title="${Drupal.t(
          'Changed',
        )}">*</abbr>`;
      },

      /**
       * Creates markup for the translation changed warning.
       *
       * @return {string}
       *   Markup for the warning.
       */
      localeTranslateChangedWarning() {
        return `<div class="clearfix messages messages--warning">${Drupal.theme(
          'localeTranslateChangedMarker',
        )} ${Drupal.t(
          'Changes made in this table will not be saved until the form is submitted.',
        )}</div>`;
      },
    },
  );
})(jQuery, Drupal);