/**
 * 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
 */

/* eslint-disable no-console */
console.log(
	'Hello World! (from block-and-function-orphic-block-and-function block)'
);
/* eslint-enable no-console */

import Splide from '@splidejs/splide';

const CarouselModule = {
  config: {
    autoplayInterval: null,
    showArrows: true,
    loop: true,
    showPagination: false,
    slidePerPage: 1,
    autoplay: true
  },

  init: function (element) {
    this.config.autoplayInterval = parseInt(element.dataset.autoplayInterval);
    this.config.showArrows = element.dataset.showArrows === 'true';
    this.config.loop = element.dataset.loop === 'true';
    this.config.showPagination = element.dataset.showPagination === 'true';
    this.config.slidePerPage = parseInt(element.dataset.slidesPerPage);
    this.config.autoplay = element.dataset.autoplay === 'true';
    const isAutoWidth = element.dataset.autoWidth === 'true';
    const slideWidth = !isAutoWidth ? parseFloat(element.dataset.slideWidth) : this.calculateWidth(element, this.config.slidePerPage);

    // Configuration Splide de base
    const splideConfig = {
      type: this.config.loop ? 'loop' : 'slide',
      gap: '20px',
      padding: '10px',
      arrows: this.config.showArrows,
      pagination: this.config.showPagination,
      autoplay: this.config.autoplay,
      interval: this.config.autoplayInterval || 3000,
      pauseOnHover: true,
      pauseOnFocus: true,
      drag: true,
      snap: true,
      keyboard: true,
      updateOnMove: true,
      trimSpace: false,
      perPage: this.config.slidePerPage,
      perMove: 1,
      focus: 0,
      fixedWidth: `${slideWidth}px`,
      fixedHeight: false,
      speed: 400,
      easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
      autoWidth: false
    };
    console.log(slideWidth);

    // Création de l'instance
    const splide = new Splide(element, splideConfig);

    splide.mount();

    splide.on('resize', () => {
      if (window.innerWidth < 750) {
        splide.options = {
          perPage: 1,
          fixedWidth: false
        };
      } else {
        splide.options = {
          perPage: this.config.slidePerPage,
          fixedWidth: `${slideWidth}px`
        };
      }
    });

    return splide;
  },
  calculateWidth : (element, slidePerPage) => {
    const style = window.getComputedStyle(element);
    const width = parseInt(style.maxWidth);
    if(width) {
      return (width - (slidePerPage * 20)) / slidePerPage;
    }
    if(window.innerWidth > 1300) {
      return (window.innerWidth - (slidePerPage * 20)) / slidePerPage;
    } else {
      return (1300 - (slidePerPage * 20)) / slidePerPage;
    }
  }
};

// Initialisation
document.addEventListener('DOMContentLoaded', () => {
  const carousels = document.querySelectorAll('.wp-block-orphic-ui-carousel');
  
  carousels.forEach(carousel => {
    CarouselModule.init(carousel);
  });
});

export default CarouselModule;
