"use strict";

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

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

exports.__esModule = true;
exports.PreviewCarousel = void 0;

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

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

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

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

var _Buttons = require("../Buttons");

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

var PreviewCarousel = function PreviewCarousel(_ref) {
  var slides = _ref.slides,
      currentSlide = _ref.currentSlide,
      slideToIndex = _ref.slideToIndex,
      thumbnailImageForVideo = _ref.thumbnailImageForVideo,
      parentCarousel = _ref.parentCarousel;

  var _useCarousel = (0, _lib.useCarousel)({
    containScroll: 'trimSnaps',
    axis: 'x',
    startIndex: currentSlide,
    align: 'start'
  }),
      Carousel = _useCarousel[0],
      carousel = _useCarousel[1];

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

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

  parentCarousel == null ? void 0 : parentCarousel.on('init', function () {
    carousel == null ? void 0 : carousel.reInit();
  });
  var scrollPrev = (0, _react.useCallback)(function () {
    return parentCarousel == null ? void 0 : parentCarousel.scrollPrev();
  }, [parentCarousel]);
  var scrollNext = (0, _react.useCallback)(function () {
    return parentCarousel == null ? void 0 : parentCarousel.scrollNext();
  }, [parentCarousel]);
  (0, _react.useEffect)(function () {
    carousel == null ? void 0 : carousel.scrollTo(currentSlide);
  }, [currentSlide]);

  var handleSlideClick = function handleSlideClick(index) {
    return function () {
      if (!(carousel != null && carousel.clickAllowed())) return;
      slideToIndex(index);
    };
  };

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(SlidesContainer, null, /*#__PURE__*/_react["default"].createElement(Carousel, null, /*#__PURE__*/_react["default"].createElement(SlidesWrapper, null, slides == null ? void 0 : slides.map(function (slide, index) {
    var image = slide == null ? void 0 : slide.url;
    return /*#__PURE__*/_react["default"].createElement(Slide, {
      onClick: handleSlideClick(index),
      key: "image_" + image
    }, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(Image, {
      src: !image.includes('youtube') ? image : thumbnailImageForVideo,
      alt: "",
      isSelected: index === currentSlide
    })));
  })))), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Buttons.PrevButton, {
    onClick: scrollPrev,
    enabled: prevBtnEnabled
  }), /*#__PURE__*/_react["default"].createElement(_Buttons.NextButton, {
    onClick: scrollNext,
    enabled: nextBtnEnabled
  })));
};

exports.PreviewCarousel = PreviewCarousel;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  z-index: 100;\n  margin: 0 auto;\n  max-width: 100%;\n  bottom: 0.6rem;\n  padding: 0 3.5rem;\n  opacity: 1;\n\n  transition: opacity 0.3s ease;\n\n  @media (min-width: ", ") {\n    max-width: 95%;\n    right: 2rem;\n    bottom: 5rem;\n    margin: 0;\n    opacity: 0;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 50%;\n  }\n\n  div:hover > & {\n    opacity: 1;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var SlidesContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-bottom: 0;\n  position: relative;\n  z-index: 1;\n\n  overflow: hidden;\n"])));

var SlidesWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding-bottom: 0;\n  display: flex;\n  flex-direction: row;\n  margin-left: -1rem;\n"])));

var Slide = _styledComponents["default"].figure(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  box-sizing: border-box;\n  cursor: pointer;\n  min-width: 10rem;\n  max-width: 10rem;\n  padding-left: 1rem;\n"])));

var ImageContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));

var Image = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: inline-block;\n  width: 100%;\n  height: auto;\n\n  transition: opacity 0.15s ease, border-color 0.15s ease;\n  opacity: ", ";\n  border: 0.2rem solid\n    ", ";\n\n  &:hover {\n    opacity: 0.8;\n    border-color: ", ";\n  }\n"])), function (props) {
  return props.isSelected ? 1 : '0.6';
}, function (props) {
  return props.isSelected ? "" + props.theme.palette.light : 'unset';
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map