Carousel

import debounce from 'lodash.debounce';
import Glide from '@glidejs/glide';

export default ({ imageGalleryElement, responsive = [], ...options }) => {
  const slides = imageGalleryElement.querySelectorAll('.glide__slides > li');
  let glide = '';
  let transformCount = 0;
  const breakpointSettings = {
    500: {
      perView: 1,
      peek: { before: 0, after: 0 },
    },
    954: {
      perView: 1,
    },
    1200: {
      perView: 1,
      peek: { before: 'auto', after: 'auto' },
      slideWidth: 954,
    },
    ...responsive,
  };

  const getCurrentSettings = () => {
    const screenWidth = window.innerWidth;

    // Because the `perView` changes at different breakpoints, find
    // the relevant setting for the current screensize.
    // Filter out any settings that are smaller than the current size, and
    // then use the first in the list, as this will be the most relevant.
    // If none are available, assume we are using the biggest setting.

    // TODO: We should be able to reuse this, if we want to change the pagination
    // to scroll full pages, rather than individual items
    const breakpointSettingsForCurrentSize =
      Object.keys(breakpointSettings).filter(
        i => parseInt(i, 10) > screenWidth
      )[0] || Object.keys(breakpointSettings).slice(-1);

    return breakpointSettings[breakpointSettingsForCurrentSize];
  };

  const updateBulletSize = (dot, action) => {
    if (action === 'add') {
      imageGalleryElement
        .querySelector(`.glide-carousel__pagination > [data-slide-no='${dot}']`)
        .classList.add('small');
    } else {
      imageGalleryElement
        .querySelector(`.glide-carousel__pagination > [data-slide-no='${dot}']`)
        .classList.remove('small');
    }
  };

  const setBulletDefaultSize = () => {
    const maxDots = 5;
    const totalCount = slides.length;
    const navigationElements = imageGalleryElement.querySelectorAll(
      `.glide-carousel__pagination > [data-slide-no]`
    );

    if (totalCount > maxDots) {
      navigationElements.forEach(item => {
        item.classList.remove('small');
      });
      transformCount = 0;
      // eslint-disable-next-line no-param-reassign
      imageGalleryElement.querySelector(
        '.glide-carousel__pagination'
      ).style.transform = 'translateX(0)';
      updateBulletSize(4, 'add');
    }
  };

  const setBulletSize = (currentSlide, nextSlide) => {
    const maxDots = 5;
    const transformXIntervalNext = -24;
    const transformXIntervalPrev = 24;
    const totalCount = slides.length;

    if (totalCount > maxDots) {
      if (nextSlide > currentSlide) {
        if (
          imageGalleryElement
            .querySelector(
              `.glide-carousel__pagination > [data-slide-no='${nextSlide}']`
            )
            .classList.contains('small')
        ) {
          if (
            !imageGalleryElement
              .querySelector(
                `.glide-carousel__pagination > [data-slide-no]:last-child`
              )
              .classList.contains('small')
          ) {
            // eslint-disable-next-line operator-assignment
            transformCount = transformCount + transformXIntervalNext;
            updateBulletSize(nextSlide, 'remove');
            const nextSlidePlusOne = nextSlide + 1;

            updateBulletSize(nextSlidePlusOne, 'add');
            // eslint-disable-next-line no-param-reassign
            imageGalleryElement.querySelector(
              '.glide-carousel__pagination'
            ).style.transform = `translateX(${transformCount}px)`;
            const pPointer = nextSlide - 3;
            const pPointerMinusOne = pPointer - 1;

            updateBulletSize(pPointerMinusOne, 'remove');
            updateBulletSize(pPointer, 'add');
          }
        } else {
          // eslint-disable-next-line no-lonely-if
          if (nextSlide === slides.length - 1) {
            const navigationElements = imageGalleryElement.querySelectorAll(
              `.glide-carousel__pagination > [data-slide-no]`
            );

            navigationElements.forEach(item => {
              item.classList.remove('small');
            });
            updateBulletSize(slides.length - 5, 'add');
            transformCount = (slides.length - 5) * transformXIntervalNext;
            // eslint-disable-next-line no-param-reassign
            imageGalleryElement.querySelector(
              '.glide-carousel__pagination'
            ).style.transform = `translateX(${transformCount}px)`;
          }
        }
      } else {
        // eslint-disable-next-line no-lonely-if
        if (
          imageGalleryElement
            .querySelector(
              `.glide-carousel__pagination > [data-slide-no='${nextSlide}']`
            )
            .classList.contains('small')
        ) {
          if (
            !imageGalleryElement
              .querySelector(
                `.glide-carousel__pagination > [data-slide-no]:first-child`
              )
              .classList.contains('small')
          ) {
            // eslint-disable-next-line operator-assignment
            transformCount = transformCount + transformXIntervalPrev;
            updateBulletSize(nextSlide, 'remove');
            const nextSlidePlusOne = nextSlide - 1;

            updateBulletSize(nextSlidePlusOne, 'add');
            // eslint-disable-next-line no-param-reassign
            imageGalleryElement.querySelector(
              '.glide-carousel__pagination'
            ).style.transform = `translateX(${transformCount}px)`;
            const nPointer = currentSlide + 3;
            const nPointerMinusOne = nPointer - 1;

            // console.log(`${nPointer} - ${nPointerMinusOne}`);
            updateBulletSize(nPointer, 'remove');
            updateBulletSize(nPointerMinusOne, 'add');
          }
        } else {
          // eslint-disable-next-line no-lonely-if
          if (nextSlide === 0) {
            setBulletDefaultSize();
          }
        }
      }
    }
  };

  const countLeftPad = number => {
    const slideCount = number.toString();

    // eslint-disable-next-line no-undef
    return slideCount.padStart(2, '0');
  };

  const setSlideCount = currentIndex => {
    const slideCountBlock = imageGalleryElement.querySelector(
      '.image-gallery__totalslides--count'
    );

    slideCountBlock.innerHTML = `${countLeftPad(
      currentIndex + 1
    )}/${countLeftPad(slides.length)}`;
  };

  const showPaginationByPage = () => {
    // Glide shows a pagination button for each item, and doesn't provide
    // an option to navigate whole pages at a time.
    // This function hides extra individual dots, so that only the first item of
    // each page is shown. (Based on the `perView` setting).
    const { perView } = getCurrentSettings();

    const paginationElements = imageGalleryElement.querySelectorAll(
      `.glide-carousel__pagination button:not(:nth-child(${perView}n + 1))`
    );

    paginationElements.forEach(item => {
      item.classList.add('hidden');
    });

    setSlideCount(0);
    setBulletDefaultSize();
  };

  const showHideNavigation = () => {
    const maxPerView = getCurrentSettings().perView;
    const navigationElements = imageGalleryElement.querySelectorAll(
      '[data-slide-no]'
    );

    if (!slides || slides.length <= maxPerView) {
      navigationElements.forEach(item => item.classList.add('hidden'));
      // eslint-disable-next-line no-param-reassign
      imageGalleryElement.querySelector(
        '.image-gallery__navigation'
      ).style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      imageGalleryElement.querySelector(
        '.image-gallery__totalslides'
      ).style.display = 'none';
      imageGalleryElement
        .querySelector('.glide__slides')
        .classList.add('singleslide');
      return;
    }
    navigationElements.forEach(item => item.classList.remove('hidden'));

    showPaginationByPage();
  };

  const createPagination = () => {
    const bulletContainer = document.createElement('div');

    bulletContainer.classList.add('glide-carousel__pagination');
    bulletContainer.dataset.glideEl = 'controls[nav]';

    slides.forEach((slide, index) => {
      const button = document.createElement('button');

      button.dataset.slideNo = `${index}`;
      button.tabIndex = '-1';
      bulletContainer.appendChild(button);
    });

    imageGalleryElement
      .querySelector('.carousel-nav-wrapper')
      .appendChild(bulletContainer);
    showHideNavigation();
  };

  const setPeekVal = () => {
    let peekVal = 0;

    if (document.body.clientWidth > 954) {
      peekVal = (document.body.clientWidth - 954) / 2;
    }
    glide.update({
      peek: { before: peekVal, after: peekVal },
    });
  };

  createPagination();

  window.addEventListener(
    'resize',
    debounce(() => {
      // Hide the navigation when we don't have more items than we can show on screen
      showHideNavigation();
      setPeekVal();
    }, 250)
  );

  glide = new Glide(imageGalleryElement, {
    perView: 1,
    type: 'carousel',
    breakpoints: breakpointSettings,
    peek: { before: 100, after: 100 },
    ...options,
  }).mount();
  glide.on('run', () => {
    const currentSlide = imageGalleryElement
      .querySelector(
        '.glide-carousel__pagination > [data-slide-no].glide__bullet--active'
      )
      .getAttribute('data-slide-no');
    const nextSlide = glide.index;

    // console.log(`${currentSlide} - ${nextSlide}`);
    // eslint-disable-next-line radix
    setBulletSize(parseInt(currentSlide), nextSlide);
    setSlideCount(nextSlide);
    updateBulletSize(nextSlide, 'remove');
  });
  if (slides.length === 1) {
    glide.update({
      type: 'slider',
      peek: { before: 0, after: 0 },
    });
  } else {
    setPeekVal();
  }
  return glide;
};

import Glider from '../../behaviours/carousel/glider/glider';

export default ({ carouselElement, responsive = [], ...options }) => {
  const defaultOptions = {
    slidesToShow: 1,
    slidesToScroll: 1,
    scrollLock: true,
    draggable: true,
    arrows: {
      prev: '.carousel__prev',
      next: '.carousel__next',
    },
    dots: '.carousel__pagination',
    responsive: [
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 900,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
        },
      },
      ...responsive,
    ],
  };

  return new Glider(carouselElement, {
    ...defaultOptions,
    ...options,
  });
};