// ES modules
import Hequalizer from 'hequalizer';

// CommonJS
const Hequalizer = require('hequalizer');

// Seleccionar los títulos de las tarjetas
const cardTitles = document.querySelectorAll('.card h3');

// Inicializar Hequalizer
new Hequalizer(cardTitles);

const gridItems = document.querySelectorAll('.grid-item');

new Hequalizer(gridItems, {
  columns: 3,
  responsive: {
    1024: { columns: 2 },
    768: { columns: 1 }
  }
});

const swiper = new Swiper('.swiper', {
  slidesPerView: 3,
  spaceBetween: 20
});

const slideTitles = document.querySelectorAll('.swiper-slide h3');
const slideDescriptions = document.querySelectorAll('.swiper-slide p');

// Igualar títulos y descripciones independientemente
new Hequalizer(slideTitles);
new Hequalizer(slideDescriptions);

const cards = document.querySelectorAll('.card');

new Hequalizer(cards, {
  on: {
    init: ({rows, instance}) => {
      console.log(`Altura inicial: ${rows}px`);
      console.log('ID de instancia:', instance.id);
    },
    afterResize: ({rows, instance}) => {
      console.log(`Nueva altura después de resize: ${rows}px`);
      // Añadir animación al cambiar tamaño
      cards.forEach(card => {
        card.style.transition = 'height 0.3s ease';
      });
    },
    afterChanges: ({rows, instance}) => {
      console.log('Contenido cambió, nueva altura:', rows);
    },
    afterUpdate: ({rows, instance}) => {
      console.log('Actualización manual completada:', rows);
    },
    afterDestroy: ({rows, instance}) => {
      console.log('Instancia destruida:', instance.id);
    }
  }
});

const items = document.querySelectorAll('.item');

new Hequalizer(items, {
  classElementToOmit: 'skip-height'
});

// Crear instancias independientes
const instance1 = new Hequalizer(document.querySelectorAll('.group-1'));
const instance2 = new Hequalizer(document.querySelectorAll('.group-2'));

// Ver todas las instancias activas
console.log(window.HequalizerAPI.Instances);

// Actualizar instancia específica manualmente
instance1.update();

// Destruir instancia específica
instance2.destroy(true); // true = remover del registro global

// Remover por ID desde el API global
window.HequalizerAPI.removeInstance(instance1.id);

const elements = document.querySelectorAll('.element');

new Hequalizer(elements, {
  cssVariable: '--card-height'
});

new Hequalizer(elements, options)

new Hequalizer(elements, {
  // Configuración base (desktop)
  columns: 3,
  cssVariable: '--desktop-height',

  // Configuraciones responsive
  responsive: {
    1024: {
      columns: 2,
      cssVariable: '--tablet-height'
    },
    768: {
      columns: 1,
      cssVariable: '--mobile-height',
      resizeObserver: false // Desactivar observador en móvil
    }
  }
});

new Hequalizer(elements, options)

const instance = new Hequalizer(elements);

// Actualizar manualmente después de cambios dinámicos
instance.update();

// Destruir sin remover del registro
instance.destroy();

// Destruir y remover del registro global
instance.destroy(true);

const instance = new Hequalizer(elements, options);

// Propiedades disponibles
instance.id               // String: ID único generado automáticamente
instance.elementsArray    // Array: Elementos originales pasados al constructor
instance.values           // Number | Array: Altura(s) calculada(s)
instance.actualOptions    // Object: Opciones actualmente aplicadas
instance.actualBreakpoint // String | Number: Breakpoint actual activo ("default" o el número del breakpoint)
instance.responsive       // Object: Configuración responsive original

// Acceder al API global
window.HequalizerAPI

// Propiedades y métodos disponibles
window.HequalizerAPI.Init              // Constructor de Hequalizer
window.HequalizerAPI.Instances         // Array con todas las instancias activas
window.HequalizerAPI.removeInstance(id) // Remover instancia por ID

// Crear instancias
const inst1 = new Hequalizer(elements1);
const inst2 = new Hequalizer(elements2);

// Ver todas las instancias
console.log(window.HequalizerAPI.Instances); // [inst1, inst2]

// Crear usando el API global
const inst3 = window.HequalizerAPI.Init(elements3, options);

// Remover instancia específica
window.HequalizerAPI.removeInstance(inst1.id);

// Ver instancias restantes
console.log(window.HequalizerAPI.Instances); // [inst2, inst3]

const instance = new Hequalizer(elements, {
  on: {
    init: ({rows, instance}) => {
      console.log('✓ Inicializado');
      console.log('Altura:', rows);
      console.log('ID:', instance.id);
      console.log('Breakpoint actual:', instance.actualBreakpoint);
    },

    afterResize: ({rows, instance}) => {
      console.log('↔ Resize detectado');
      console.log('Nueva altura:', rows);

      // Ejemplo: Ejecutar código específico según breakpoint
      if (instance.actualBreakpoint === 768) {
        console.log('Ahora estamos en móvil');
      }
    },

    afterChanges: ({rows, instance}) => {
      console.log('⚡ Contenido cambió');
      console.log('Altura actualizada:', rows);
    },

    afterUpdate: ({rows, instance}) => {
      console.log('🔄 Actualización manual');
      console.log('Altura:', rows);
    },

    afterDestroy: ({rows, instance}) => {
      console.log('✕ Instancia destruida');
      console.log('ID destruido:', instance.id);
    }
  }
});

new Hequalizer(elements, {
  columns: "all"
});

// Ejemplo: Si el elemento más alto mide 150px
instance.values // 150

new Hequalizer(elements, {
  columns: 3 // Agrupa cada 3 elementos
});

// Ejemplo: 9 elementos agrupados de 3 en 3
instance.values // [150, 180, 140]
// Grupo 1: 150px, Grupo 2: 180px, Grupo 3: 140px

const elements = document.querySelectorAll('.card');

new Hequalizer(elements, {
  // Configuración base (desktop > 1024px)
  cssVariable: '--desktop-height',
  columns: 4,
  resizeObserver: true,

  responsive: {
    // Tablets (≤ 1024px)
    1024: {
      cssVariable: '--tablet-height',
      columns: 2
    },

    // Móviles horizontal (≤ 768px)
    768: {
      cssVariable: '--mobile-landscape-height',
      columns: 2
    },

    // Móviles vertical (≤ 480px)
    480: {
      cssVariable: '--mobile-height',
      columns: 1,
      resizeObserver: false // Desactivar observador para mejor performance
    }
  },

  on: {
    afterResize: ({rows, instance}) => {
      console.log('Breakpoint actual:', instance.actualBreakpoint);
      console.log('Opciones aplicadas:', instance.actualOptions);
      console.log('Alturas calculadas:', rows);
    }
  }
});

// 1. Crear instancia y guardar referencia
const myInstance = new Hequalizer(elements, options);

// 2. Acceder a instancia por ID
const instanceId = myInstance.id;
const foundInstance = window.HequalizerAPI.Instances.find(
  inst => inst.id === instanceId
);

// 3. Ver todas las instancias activas
console.log(window.HequalizerAPI.Instances);

// 4. Actualizar instancia específica
myInstance.update();

// 5. Destruir instancia (mantiene en registro)
myInstance.destroy();

// 6. Destruir y remover del registro
myInstance.destroy(true);

// 7. Remover instancia por ID
window.HequalizerAPI.removeInstance(instanceId);

// 8. Acceder a propiedades de la instancia
console.log('Altura actual:', myInstance.values);
console.log('Breakpoint:', myInstance.actualBreakpoint);
console.log('Opciones:', myInstance.actualOptions);

// Esto ocurre automáticamente al crear una instancia
document.fonts.ready.then(() => {
  // Ahora las mediciones serán precisas
  this.init();
});