/**
 * Use this file for JavaScript code that you want to run in the front-end
 * on posts/pages that contain this block.
 *
 * When this file is defined as the value of the `viewScript` property
 * in `block.json` it will be enqueued on the front end of the site.
 *
 * Example:
 *
 * ```js
 * {
 *   "viewScript": "file:./view.js"
 * }
 * ```
 *
 * If you're not making any changes to this file because your project doesn't need any
 * JavaScript running in the front-end, then you should delete this file and remove
 * the `viewScript` property from `block.json`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
 */

// Import Motion au début du fichier
import { animate } from "https://cdn.jsdelivr.net/npm/motion@11.18.2/+esm";

const faqModule = {
  initFollower() {
    const faqContainers = document.querySelectorAll('.orphic-wp-block-faq__container');
    
    faqContainers.forEach(container => {
      const follower = container.querySelector('.orphic-wp-block-faq__filter-follower');
      const filterItems = container.querySelector('.orphic-wp-block-faq__filter-items');
      const filterItemsArray = container.querySelectorAll('.orphic-wp-block-faq__filter-item');
      
      if (follower && filterItemsArray.length > 0) {
        // Position initiale
        follower.style.transform = `translateX(${filterItemsArray[0].offsetLeft}px)`;
        follower.style.width = `${filterItemsArray[0].offsetWidth}px`;
        follower.style.bottom = '-1px';

        filterItemsArray.forEach((item) => {
          item.addEventListener('click', () => {
            const position = item.offsetLeft - filterItems.scrollLeft;
            
            animate(follower, {
              transform: `translateX(${position}px)`,
              width: `${item.offsetWidth}px`
            }, {
              duration: 0.3,
              easing: [.4, 0, .2, 1] // power2.inOut equivalent
            });
          });
        });
      }
    });
  },

  initPanel() {
    const faqContainers = document.querySelectorAll('.orphic-wp-block-faq__container');
    
    faqContainers.forEach(container => {
      const panels = container.querySelectorAll('.orphic-wp-block-faq__questions-panel');
      const filterItems = container.querySelectorAll('.orphic-wp-block-faq__filter-item');

      filterItems.forEach((item) => {
        item.addEventListener('click', () => {
          filterItems.forEach(filterItem => {
            filterItem.classList.remove('active');
          });
          item.classList.add('active');

          panels.forEach((panel) => {
            if (panel.dataset.id === item.dataset.id) {
              panel.classList.add('active');
            } else {
              panel.classList.remove('active');
            }
          });
        });
      });
    });
  },

  initContent() {
    const faqItems = document.querySelectorAll('.orphic-wp-block-faq__questions-faq-item');

    faqItems.forEach((item) => {
      const header = item.querySelector('.orphic-wp-block-faq__questions-faq-item-header');
      const content = item.querySelector('.orphic-wp-block-faq__questions-faq-item-content');
      
      // Initialiser la hauteur à 0
      content.style.height = '0px';
      
      header.addEventListener('click', () => {
        const isActive = item.classList.contains('active');
        
        // Toggle la classe active sur l'item
        item.classList.toggle('active');
        
        // Animer la hauteur
        animate(content, {
          height: isActive ? '0px' : `${content.scrollHeight}px`
        }, {
          duration: 0.3,
          easing: [.25, .1, .25, 1] // power4.out equivalent
        });
      });
    });
  },

  initScrollFilter() {
    const filter = document.querySelector('.orphic-wp-block-faq__filter');
    const filterItems = filter.querySelector('.orphic-wp-block-faq__filter-items');
    const follower = filter.querySelector('.orphic-wp-block-faq__filter-follower');

    filter.addEventListener('wheel', (event) => {
      event.preventDefault();
      
      const newScrollLeft = filterItems.scrollLeft + event.deltaY;
      filterItems.scrollLeft = newScrollLeft;
      
      const activeFilterItem = filterItems.querySelector('.orphic-wp-block-faq__filter-item.active');
      if (activeFilterItem) {
        const position = activeFilterItem.offsetLeft - filterItems.scrollLeft;
        animate(follower, {
          transform: `translateX(${position}px)`
        }, {
          duration: 0.1
        });
      }
    });

    filterItems.addEventListener('scroll', () => {
      const activeFilterItem = filterItems.querySelector('.orphic-wp-block-faq__filter-item.active');
      if (activeFilterItem) {
        const position = activeFilterItem.offsetLeft - filterItems.scrollLeft;
        animate(follower, {
          transform: `translateX(${position}px)`
        }, {
          duration: 0.1
        });
      }
    });
  },

  init: function() {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.initializeFaq());
    } else {
      this.initializeFaq();
    }
  },

  initializeFaq: function() {
    this.initFollower();
    this.initPanel();
    this.initContent();
    this.initScrollFilter();
  }
};

faqModule.init();