'use strict';

const React = require('react');
const emblaCarouselReactiveUtils_esm = require('../../../../embla-carousel-reactive-utils@8.6.0_embla-carousel@8.6.0/node_modules/embla-carousel-reactive-utils/esm/embla-carousel-reactive-utils.esm.cjs');
const emblaCarousel_esm = require('../../../../embla-carousel@8.6.0/node_modules/embla-carousel/esm/embla-carousel.esm.cjs');

function useEmblaCarousel(options = {}, plugins = []) {
  const storedOptions = React.useRef(options);
  const storedPlugins = React.useRef(plugins);
  const [emblaApi, setEmblaApi] = React.useState();
  const [viewport, setViewport] = React.useState();
  const reInit = React.useCallback(() => {
    if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current);
  }, [emblaApi]);
  React.useEffect(() => {
    if (emblaCarouselReactiveUtils_esm.areOptionsEqual(storedOptions.current, options)) return;
    storedOptions.current = options;
    reInit();
  }, [options, reInit]);
  React.useEffect(() => {
    if (emblaCarouselReactiveUtils_esm.arePluginsEqual(storedPlugins.current, plugins)) return;
    storedPlugins.current = plugins;
    reInit();
  }, [plugins, reInit]);
  React.useEffect(() => {
    if (emblaCarouselReactiveUtils_esm.canUseDOM() && viewport) {
      emblaCarousel_esm.globalOptions = useEmblaCarousel.globalOptions;
      const newEmblaApi = emblaCarousel_esm(viewport, storedOptions.current, storedPlugins.current);
      setEmblaApi(newEmblaApi);
      return () => newEmblaApi.destroy();
    } else {
      setEmblaApi(undefined);
    }
  }, [viewport, setEmblaApi]);
  return [setViewport, emblaApi];
}
useEmblaCarousel.globalOptions = undefined;

module.exports = useEmblaCarousel;
