import { useEffect } from '@wordpress/element';

type swiperSettings = {
  navigation: boolean;
  slidesPerView: {
    xs: number;
    md: number;
    lg: number;
  };
  speed: number;
  loop: boolean;
  autoplay: {
    delay: number;
    disableOnInteraction: boolean;
  } | null;
  pagination: {
    type: string;
    clickable: boolean;
  } | null;
  spaceBetween: number;
  cssMode: boolean;
};
const updateSwiperAttributes = (settings: swiperSettings, swiperEl: any) => {
  // const swiperParams = { ...settings };

  if (swiperEl.swiper) {
    for (const [key, val] of Object.entries(settings)) {
      switch (key) {
        case 'pagination':
          if (val === null) {
            swiperEl.removeAttribute('pagination');
            swiperEl.removeAttribute('pagination-type');
            swiperEl.removeAttribute('pagination-clickable');
          } else {
            swiperEl.setAttribute('pagination', 'true');
            swiperEl.setAttribute(
              'pagination-type',
              (val as { type: string; clickable: boolean }).type
            );
            if (typeof val === 'object' && 'clickable' in val) {
              swiperEl.setAttribute('pagination-clickable', val.clickable);
            }
          }
          break;
        case 'autoplay':
          if (val === null) {
            swiperEl.swiper.autoplay.stop();
            swiperEl.removeAttribute('autoplay');
            swiperEl.removeAttribute('autoplay-delay');
            swiperEl.removeAttribute('autoplay-disable-on-interaction');
          } else {
            swiperEl.setAttribute('autoplay', 'true');
            if (typeof val === 'object' && 'delay' in val) {
              swiperEl.setAttribute('autoplay-delay', val.delay);
            }
            swiperEl.setAttribute(
              'autoplay-disable-on-interaction',
              (val as { delay: number; disableOnInteraction: boolean })
                .disableOnInteraction
                ? 'true'
                : 'false'
            );
            swiperEl.swiper.autoplay.start();
          }
          break;
        case 'slidesPerView':
          const slidesPerView = val as { xs: number; md: number; lg: number };

          swiperEl.setAttribute('slides-per-view', slidesPerView.xs);

          const breakpoints = {
            768: { slidesPerView: slidesPerView.md },
            1024: { slidesPerView: slidesPerView.lg },
          };
          swiperEl.setAttribute('breakpoints', JSON.stringify(breakpoints));
          swiperEl.swiper.params.breakpoints = breakpoints;
          swiperEl.swiper.currentBreakpoint = false;

          break;
        case 'spaceBetween':
          if (val === null) {
            swiperEl.removeAttribute('space-between');
          } else {
            swiperEl.setAttribute('space-between', val);
          }
          break;
        case 'navigation':
          if (val) {
            const prevEl = swiperEl.querySelector('.swiper-button-prev');
            const nextEl = swiperEl.querySelector('.swiper-button-next');
            if (prevEl && nextEl) {
              swiperEl.swiper.params.navigation = {
                prevEl,
                nextEl,
              };
              swiperEl.swiper.navigation.init();
              swiperEl.swiper.navigation.update();
            }
          } else {
            swiperEl.swiper.params.navigation = {
              prevEl: null,
              nextEl: null,
            };
          }
          break;
        default:
          if (val === null) {
            swiperEl.removeAttribute(key);
          } else {
            swiperEl.setAttribute(key, val);
          }
      }
    }
  }
  swiperEl.swiper.update();
};

export default function useUpdateSwiper(props: any, swiperRef: any) {
  const { attributes, innerBlocks } = props;
  const { carouselSettings } = attributes;

  useEffect(() => {
    if (!swiperRef.current) return;
    const swiperEl: any = swiperRef.current;
    const swiperContainer = swiperEl.querySelector('swiper-container');

    if (!swiperContainer) return;

    if (
      swiperContainer.initialize !== undefined &&
      swiperContainer.swiper === undefined
    ) {
      swiperContainer.initialize();
    } else {
      // Retry logic: Keep checking until swiperEl.initialize becomes available
      const retryInterval = setInterval(() => {
        if (swiperContainer.initialize !== undefined) {
          swiperContainer.initialize();
          clearInterval(retryInterval);
        }
      }, 100);
    }
    if (swiperContainer.swiper) {
      updateSwiperAttributes(carouselSettings, swiperContainer);
    }
  }, [swiperRef, innerBlocks, carouselSettings]);
}