"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.CarouselComponent = CarouselComponent;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _HeaderComponent = require("../HeaderComponent");

var _Components = require("./Components");

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

function CarouselComponent(props) {
  var header = props.header,
      withArrows = props.withArrows,
      withDots = props.withDots,
      small = props.small,
      slides = props.slides,
      renderSlide = props.renderSlide,
      isBanner = props.isBanner,
      isFullWidth = props.isFullWidth,
      slideWidth = props.slideWidth,
      withScrollBar = props.withScrollBar,
      width = props.width;

  var _useEmblaCarousel = (0, _lib.useEmblaCarousel)({
    containScroll: 'trimSnaps',
    align: 'start',
    loop: isBanner ? false : true
  }),
      carouselRef = _useEmblaCarousel[0],
      carousel = _useEmblaCarousel[1];

  var _useState = (0, _react.useState)(false),
      prevBtnEnabled = _useState[0],
      setPrevBtnEnabled = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      nextBtnEnabled = _useState2[0],
      setNextBtnEnabled = _useState2[1];

  var scrollPrev = (0, _react.useCallback)(function () {
    return carousel == null ? void 0 : carousel.scrollPrev();
  }, [carousel]);
  var scrollNext = (0, _react.useCallback)(function () {
    return carousel == null ? void 0 : carousel.scrollNext();
  }, [carousel]);

  var _useState3 = (0, _react.useState)(false),
      isScrollBarVisible = _useState3[0],
      setIsScrollBarVisible = _useState3[1];

  var scrollBarRef = (0, _react.useRef)(null);

  var showScrollBar = function showScrollBar() {
    return setIsScrollBarVisible(true);
  };

  var hideScrollBar = function hideScrollBar() {
    return setIsScrollBarVisible(false);
  };

  var _useState4 = (0, _react.useState)(0),
      scrollBarWidth = _useState4[0],
      setScrollBarWidth = _useState4[1];

  var updateProgress = (0, _react.useCallback)(function () {
    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]);
  (0, _react.useEffect)(function () {
    if (carousel) {
      var onSelect = function 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 gotToSlide = (0, _react.useCallback)(function (slideIndex) {
    carousel == null ? void 0 : carousel.scrollTo(slideIndex);
  }, [carousel]);
  return /*#__PURE__*/_react["default"].createElement(Container, {
    onMouseEnter: function onMouseEnter() {
      return setIsScrollBarVisible(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setIsScrollBarVisible(false);
    }
  }, header && /*#__PURE__*/_react["default"].createElement(_HeaderComponent.HeaderComponent, {
    data: header,
    small: small
  }), /*#__PURE__*/_react["default"].createElement(CarouselContentContainer, null, /*#__PURE__*/_react["default"].createElement(CarouselContentWrapper, {
    isFullWidth: isFullWidth
  }, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement("div", {
    ref: carouselRef
  }, /*#__PURE__*/_react["default"].createElement(Wrapper, null, slides == null ? void 0 : slides.map(function (item, index) {
    return isBanner ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderSlide(item)) : /*#__PURE__*/_react["default"].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
    }, renderSlide(item));
  })), withArrows && /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-none d-lg-block"
  }, /*#__PURE__*/_react["default"].createElement(_Components.PrevButton, {
    onClick: scrollPrev,
    enabled: prevBtnEnabled
  }), /*#__PURE__*/_react["default"].createElement(_Components.NextButton, {
    onClick: scrollNext,
    enabled: nextBtnEnabled
  })), withScrollBar && scrollBarWidth && /*#__PURE__*/_react["default"].createElement(ScrollBar, {
    key: scrollBarWidth,
    className: "carousel-scrollbar",
    show: isScrollBarVisible,
    thumbWidth: scrollBarWidth
  }, /*#__PURE__*/_react["default"].createElement("span", {
    ref: scrollBarRef
  })), withDots && /*#__PURE__*/_react["default"].createElement(Dots, null, slides == null ? void 0 : slides.map(function (item, i) {
    return /*#__PURE__*/_react["default"].createElement(_Components.DotButton, {
      selected: (carousel == null ? void 0 : carousel.selectedScrollSnap()) === i,
      onClick: function onClick() {
        return gotToSlide(i);
      },
      key: 'Dots__' + i
    });
  })))))));
}

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var SlideContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (props) {
  var _props$desktop;

  return (_props$desktop = props.desktop) != null ? _props$desktop : 400;
}, function (_ref) {
  var theme = _ref.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  return props.tablet;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.sm.max;
}, function (props) {
  return props.mobile;
});

var BannerSlideContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  width: 100%;\n"])));

var CarouselContentContainer = _styledComponents["default"].figure(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media screen and (min-width: ", ") {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  display: block;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.xxl.min;
});

var CarouselContentWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media screen and (min-width: ", ") {\n    margin: 0 auto;\n    ", ";\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.xxl.min;
}, function (props) {
  return !props.isFullWidth && 'max-width: 179.2rem';
});

var Inner = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow: hidden;\n  position: relative;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n"])));

var Dots = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.max;
});

var ScrollBar = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (props) {
  return props.show && "\n      opacity: 1;\n  ";
}, function (props) {
  return props.thumbWidth;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map