"use strict";

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

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

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

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

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

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

var _Common = require("../../../../../Common");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var MobileCarousel = function MobileCarousel(_ref) {
  var images = _ref.images,
      openImageModal = _ref.openImageModal,
      video = _ref.video;
  var imagesAndVideos = images == null ? void 0 : images.slice();

  if (video) {
    imagesAndVideos.splice(1, 0, video);
  }

  var _useState = (0, _react.useState)(0),
      activeDot = _useState[0],
      setActiveDot = _useState[1];

  var _useCarousel = (0, _lib.useCarousel)({
    containScroll: 'trimSnaps',
    align: 'start' // loop: true,

  }),
      Carousel = _useCarousel[0],
      carousel = _useCarousel[1];

  var gotToSlide = (0, _react.useCallback)(function (slideIndex) {
    carousel == null ? void 0 : carousel.scrollTo(slideIndex);
  }, [carousel]);
  (0, _react.useEffect)(function () {
    carousel == null ? void 0 : carousel.on('select', function () {
      setActiveDot((carousel == null ? void 0 : carousel.selectedScrollSnap()) || 0);
    });
  }, [carousel]);
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Carousel, null, /*#__PURE__*/_react["default"].createElement(ImagesWrapper, null, imagesAndVideos == null ? void 0 : imagesAndVideos.map(function (data, i) {
    if (video && i === 1) {
      var _video$sources;

      return /*#__PURE__*/_react["default"].createElement(ImageContainer, {
        key: "Video__" + i,
        isVideo: true
      }, /*#__PURE__*/_react["default"].createElement("video", {
        width: "100%",
        height: "auto",
        autoPlay: true,
        muted: true
      }, video == null ? void 0 : (_video$sources = video.sources) == null ? void 0 : _video$sources.map(function (source, index) {
        return /*#__PURE__*/_react["default"].createElement("source", {
          key: index,
          src: source.url
        });
      })));
    }

    return /*#__PURE__*/_react["default"].createElement(ImageContainer, {
      key: "Image__" + i,
      onClick: openImageModal(i)
    }, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
      imagesMap: data,
      breakpointSizes: {
        xs: '100vw',
        sm: '100vw',
        md: '100vw',
        lg: '25vw'
      },
      defaultImageWidth: "100vw"
    }));
  }))), /*#__PURE__*/_react["default"].createElement(DotListContainer, null, Array((imagesAndVideos == null ? void 0 : imagesAndVideos.length) || 0).fill(1).map(function (_, i) {
    return /*#__PURE__*/_react["default"].createElement(Dot, {
      key: "Dot__" + i,
      onClick: function onClick() {
        return gotToSlide(i);
      },
      isSelected: activeDot === i
    });
  })));
};

exports.MobileCarousel = MobileCarousel;

var ImagesWrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div.attrs({
  className: 'd-lg-none mb-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  background-color: #f3f3f3;\n"])));

var Dot = _styledComponents["default"].div.attrs({
  className: 'mx-1'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  width: 0.8rem;\n  height: 0.8rem;\n  border-radius: 50%;\n  background-color: ", ";\n  box-shadow: rgb(244 244 245) 0 0 0.5rem 0;\n"])), function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.secondary;
});

var DotListContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  bottom: 2rem;\n  left: 0;\n  width: 100%;\n"])));

var ImageContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: calc(100% + 0.2rem);\n  max-width: none;\n\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  & img {\n    width: 100%;\n  }\n\n  background-color: ", ";\n"])), function (props) {
  return props.isVideo && '#f3f3f3';
});
//# sourceMappingURL=index.js.map