import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;

import React, { useCallback, useEffect, useState, useRef } from 'react';
import styled from 'styled-components';
import { useEmblaCarousel, usePixelProductClick } from '@sentecacommerce-theme/lib';
import { HeaderComponent } from '../HeaderComponent';
import { PrevButton, NextButton, DotButton } from './Components';
export function CarouselComponent(props) {
  var {
    header,
    withArrows,
    withDots,
    small,
    slides,
    renderSlide,
    isBanner,
    isFullWidth,
    slideWidth,
    withScrollBar,
    width
  } = props;
  var [carouselRef, carousel] = useEmblaCarousel({
    containScroll: 'trimSnaps',
    align: 'start',
    loop: isBanner ? false : true
  });
  var [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  var [nextBtnEnabled, setNextBtnEnabled] = useState(false);
  var {
    sendClickEvent
  } = usePixelProductClick();
  var scrollPrev = useCallback(() => carousel == null ? void 0 : carousel.scrollPrev(), [carousel]);
  var scrollNext = useCallback(() => carousel == null ? void 0 : carousel.scrollNext(), [carousel]);
  var [isScrollBarVisible, setIsScrollBarVisible] = useState(false);
  var scrollBarRef = useRef(null);

  var showScrollBar = () => setIsScrollBarVisible(true);

  var hideScrollBar = () => setIsScrollBarVisible(false);

  var [scrollBarWidth, setScrollBarWidth] = useState(0);
  var updateProgress = useCallback(() => {
    if (!scrollBarRef.current || !scrollBarWidth) return;

    if (carousel !== undefined && scrollBarRef !== undefined) {
      var value = carousel.scrollProgress() * 70;
      var left = Math.min(Math.max(0, value), 100 - scrollBarWidth);
      scrollBarRef.current.style.left = left + "%";
    }
  }, [carousel, scrollBarWidth, carouselRef]);
  useEffect(() => {
    if (carousel) {
      var onSelect = () => {
        (carousel.selectedScrollSnap == null ? void 0 : carousel.selectedScrollSnap()) && carousel.canScrollPrev && setPrevBtnEnabled(carousel.canScrollPrev());
        carousel.canScrollNext && setNextBtnEnabled(carousel.canScrollNext());
      };

      carousel.on && carousel.on('select', onSelect);
      carousel.on('select', showScrollBar);
      carousel.on('settle', hideScrollBar);
      onSelect();
      if (!withScrollBar) return;
      var carouselContainerNode = carousel.containerNode();
      var containerWidth = carouselContainerNode.scrollWidth;
      var itemWidth = carouselContainerNode.offsetWidth || 0;
      if (!containerWidth || !itemWidth) return;
      updateProgress();
      carousel.on('scroll', updateProgress);
      setScrollBarWidth(itemWidth / containerWidth * 100);
    }
  }, [carousel, withScrollBar, scrollBarWidth, updateProgress]);

  var handleClick = (_ref) => {
    var {
      item,
      index,
      title = ''
    } = _ref;
    var productData = {
      id: item._id,
      sku: item.sku
    };
    var additionalInfo = {
      listName: title,
      position: index
    };
    sendClickEvent({
      product: productData,
      info: additionalInfo
    });
  };

  var gotToSlide = useCallback(slideIndex => {
    carousel == null ? void 0 : carousel.scrollTo(slideIndex);
  }, [carousel]);
  return /*#__PURE__*/React.createElement(Container, {
    onMouseEnter: () => setIsScrollBarVisible(true),
    onMouseLeave: () => setIsScrollBarVisible(false)
  }, header && /*#__PURE__*/React.createElement(HeaderComponent, {
    data: header,
    small: small
  }), /*#__PURE__*/React.createElement(CarouselContentContainer, null, /*#__PURE__*/React.createElement(CarouselContentWrapper, {
    isFullWidth: isFullWidth
  }, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement("div", {
    ref: carouselRef
  }, /*#__PURE__*/React.createElement(Wrapper, null, slides == null ? void 0 : slides.map((item, index) => isBanner ? /*#__PURE__*/React.createElement(React.Fragment, null, renderSlide(item)) : /*#__PURE__*/React.createElement(SlideContainer, {
    key: 'Slide__' + (item.id || index),
    slideWidth: slideWidth,
    desktop: width == null ? void 0 : width.desktop,
    tablet: width == null ? void 0 : width.tablet,
    mobile: width == null ? void 0 : width.mobile,
    onClick: () => handleClick({
      item,
      title: header,
      index: index + 1
    })
  }, renderSlide(item)))), withArrows && /*#__PURE__*/React.createElement("span", {
    className: "d-none d-lg-block"
  }, /*#__PURE__*/React.createElement(PrevButton, {
    onClick: scrollPrev,
    enabled: prevBtnEnabled
  }), /*#__PURE__*/React.createElement(NextButton, {
    onClick: scrollNext,
    enabled: nextBtnEnabled
  })), withScrollBar && scrollBarWidth && /*#__PURE__*/React.createElement(ScrollBar, {
    key: scrollBarWidth,
    className: "carousel-scrollbar",
    show: isScrollBarVisible,
    thumbWidth: scrollBarWidth
  }, /*#__PURE__*/React.createElement("span", {
    ref: scrollBarRef
  })), withDots && /*#__PURE__*/React.createElement(Dots, null, slides == null ? void 0 : slides.map((item, i) => {
    return /*#__PURE__*/React.createElement(DotButton, {
      selected: (carousel == null ? void 0 : carousel.selectedScrollSnap()) === i,
      onClick: () => gotToSlide(i),
      key: 'Dots__' + i
    });
  })))))));
}
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var SlideContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  position: relative;\n  cursor: pointer;\n  margin-left: 1.6rem; // space between slides\n  flex-direction: column;\n  display: flex;\n  width: ", "px;\n\n  @media (max-width: ", ") {\n    margin-left: 2.4rem;\n    width: ", "px;\n  }\n\n  @media (max-width: ", ") {\n    width: ", "px;\n  }\n"])), props => {
  var _props$desktop;

  return (_props$desktop = props.desktop) != null ? _props$desktop : 400;
}, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, props => props.tablet, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.sm.max;
}, props => props.mobile);
var BannerSlideContainer = styled.div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n"])));
var CarouselContentContainer = styled.figure(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  @media screen and (min-width: ", ") {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  display: block;\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.xxl.min;
});
var CarouselContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media screen and (min-width: ", ") {\n    margin: 0 auto;\n    ", ";\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.xxl.min;
}, props => !props.isFullWidth && 'max-width: 179.2rem');
var Inner = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  position: relative;\n"])));
var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
var Dots = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  list-style: none;\n  justify-content: center;\n  left: 0;\n  right: 0;\n  top: 100%;\n  transform: translateY(-120%);\n  @media (max-width: ", ") {\n    transform: translateY(-100%);\n  }\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.max;
});
var ScrollBar = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  height: 0.5rem;\n  border-radius: 10rem;\n  background-color: #f5f5f5;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n\n  ", "\n\n  & span {\n    position: absolute;\n    display: block;\n    width: ", "%;\n    height: 0.5rem;\n    border-radius: 10rem;\n    background-color: ", ";\n  }\n"])), props => props.show && "\n      opacity: 1;\n  ", props => props.thumbWidth, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map