"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("../../../Common/HeaderComponent");

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

var _PreviewCarousel = require("./Components/PreviewCarousel");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

function CarouselComponent(props) {
  var header = props.header,
      withArrows = props.withArrows,
      small = props.small,
      slides = props.slides,
      renderSlide = props.renderSlide,
      onChange = props.onChange,
      thumbnailImgForVideo = props.thumbnailImgForVideo;

  var _useCarousel = (0, _lib.useCarousel)({
    containScroll: 'trimSnaps',
    align: 'start'
  }),
      Carousel = _useCarousel[0],
      carousel = _useCarousel[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]);
  (0, _react.useEffect)(function () {
    if (carousel) {
      var onSelect = function onSelect() {
        if (onChange) onChange(carousel);
        carousel.selectedScrollSnap() && carousel.canScrollPrev && setPrevBtnEnabled(carousel.canScrollPrev());
        carousel.canScrollNext && setNextBtnEnabled(carousel.canScrollNext());
      };

      carousel.on && carousel.on('select', onSelect);
      onSelect();
    }
  }, [carousel]);
  return /*#__PURE__*/_react["default"].createElement(Container, null, header && /*#__PURE__*/_react["default"].createElement(_HeaderComponent.HeaderComponent, {
    data: header,
    small: small
  }), /*#__PURE__*/_react["default"].createElement(CarouselContentContainer, null, /*#__PURE__*/_react["default"].createElement(CarouselContentWrapper, null, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(Carousel, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, slides == null ? void 0 : slides.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(SlideContainer, {
      key: 'Slide__' + (item.id || index)
    }, renderSlide(item));
  })), withArrows && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Components.PrevButton, {
    onClick: scrollPrev,
    enabled: prevBtnEnabled
  }), /*#__PURE__*/_react["default"].createElement(_Components.NextButton, {
    onClick: scrollNext,
    enabled: nextBtnEnabled
  })))))), /*#__PURE__*/_react["default"].createElement(_PreviewCarousel.PreviewCarousel, {
    slides: slides,
    thumbnailImageForVideo: thumbnailImgForVideo,
    currentSlide: carousel == null ? void 0 : carousel.selectedScrollSnap(),
    slideToIndex: function slideToIndex(index) {
      return carousel == null ? void 0 : carousel.scrollTo(index);
    },
    parentCarousel: carousel
  }));
}

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow-x: hidden;\n\n  max-height: 50rem;\n"])));

var SlideContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 0 0 auto;\n  position: relative;\n  width: 100%;\n  cursor: pointer;\n\n  flex-direction: column;\n  display: flex;\n\n  max-height: 50rem;\n\n  @media (min-width: ", ") {\n    padding-left: 2.4rem;\n  }\n\n  @media (min-width: ", ") {\n    width: 100%;\n  }\n\n  @media (min-width: ", ") {\n    width: 100%;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.breakpoints.md.min;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.xxl.min;
});

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

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

var Inner = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  overflow: hidden;\n\n  max-height: 50rem;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  margin-left: ", ";\n\n  @media (min-width: ", ") {\n    margin-left: ", ";\n  }\n"])), '-1.6rem'
/* This negative is used for evening out the padding-left spacing between slides */
, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.min;
}, '-2.4rem'
/* This negative is used for evening out the padding left spacing between slides for min-width: 640px screens. */
);
//# sourceMappingURL=index.js.map