/**
 * Alterna una imagen por otra al hacer clic, y la restaura en el clic siguiente.
 *
 * Uso: añade data-src-alt (y, opcional, data-alt-text) a cada <img>:
 *   <img src="original.png" alt="Original" data-src-alt="otra.png" data-alt-text="Alternativa">
 *
 * Funciona en HTML estático y como comportamiento de Drupal (Drupal.behaviors).
 */
(function () {
  'use strict';

  var SELECTOR = 'img[data-src-alt]';

  function init(img) {
    var originalSrc = img.getAttribute('src');
    var originalSrcset = img.getAttribute('srcset');
    var originalAlt = img.getAttribute('alt') || '';
    var alternateSrc = img.getAttribute('data-src-alt');
    var alternateAlt = img.getAttribute('data-alt-text');
    var showingAlternate = false;

    // Precarga la imagen alternativa para evitar parpadeo en el primer clic
    new Image().src = alternateSrc;

    // Accesible por teclado y con puntero de "clic"
    img.style.cursor = 'pointer';
    img.setAttribute('tabindex', '0');
    img.setAttribute('role', 'button');
    img.setAttribute('aria-pressed', 'false');

    function toggle() {
      showingAlternate = !showingAlternate;

      if (showingAlternate) {
        // Si la imagen tiene srcset (p. ej. estilos de imagen responsivos de Drupal),
        // el navegador lo prefiere sobre src: se retira mientras se muestra la alternativa.
        img.removeAttribute('srcset');
        img.setAttribute('src', alternateSrc);
        if (alternateAlt !== null) {
          img.setAttribute('alt', alternateAlt);
        }
      } else {
        img.setAttribute('src', originalSrc);
        if (originalSrcset) {
          img.setAttribute('srcset', originalSrcset);
        }
        img.setAttribute('alt', originalAlt);
      }
      img.setAttribute('aria-pressed', String(showingAlternate));
    }

    img.addEventListener('click', toggle);
    img.addEventListener('keydown', function (event) {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        toggle();
      }
    });
  }

  if (window.Drupal && window.once) {
    Drupal.behaviors.imgToggle = {
      attach: function (context) {
        once('img-toggle', SELECTOR, context).forEach(init);
      }
    };
  } else {
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll(SELECTOR).forEach(init);
    });
  }
})();