"use strict";

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

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

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

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

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

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

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;

var ProductImageCarousel = function ProductImageCarousel(_ref) {
  var images = _ref.images,
      axis = _ref.axis,
      selectedImageIndex = _ref.selectedImageIndex,
      video = _ref.video;

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

  var _useConfigState = (0, _lib.useConfigState)(),
      theme = _useConfigState.theme;

  var imagesAndVideos = images.slice();

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

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

  var _useState2 = (0, _react.useState)(selectedImageIndex > 0),
      prevBtnEnabled = _useState2[0],
      setPrevBtnEnabled = _useState2[1];

  var _useState3 = (0, _react.useState)(selectedImageIndex < imagesAndVideos.length - 1),
      nextBtnEnabled = _useState3[0],
      setNextBtnEnabled = _useState3[1];

  var _useZoom = (0, _lib.useZoom)({
    carousel: carousel
  }),
      isZoomed = _useZoom.isZoomed,
      isDesktopZoomed = _useZoom.isDesktopZoomed,
      containerRef = _useZoom.containerRef,
      imageWrapperProps = _useZoom.imageWrapperProps;

  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 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.selectedScrollSnap() && carousel.canScrollPrev && setPrevBtnEnabled(carousel.canScrollPrev());
      carousel.canScrollNext && setNextBtnEnabled(carousel.canScrollNext());
    });
  }, [carousel]);
  /**
   * Slide carousel onWheel
   */

  var onWheel = (0, _react.useCallback)(function (e) {
    if (isZoomed || isDesktopZoomed) return;

    if (e.deltaY < 0 && prevBtnEnabled) {
      scrollPrev();
      return;
    } else if (e.deltaY > 0 && nextBtnEnabled) {
      scrollNext();
    }
  }, [prevBtnEnabled, nextBtnEnabled, scrollNext, scrollPrev, isZoomed, isDesktopZoomed]);
  (0, _react.useEffect)(function () {
    window.addEventListener('wheel', onWheel);
    return function () {
      window.removeEventListener('wheel', onWheel);
    };
  }, [onWheel]); // close zoom prompt after 2sec

  var _React$useState = _react["default"].useState(true),
      firstOpen = _React$useState[0],
      setFirstOpen = _React$useState[1];

  (0, _react.useEffect)(function () {
    if (!firstOpen) return;
    setTimeout(function () {
      return setFirstOpen(false);
    }, 2000);
  }, [firstOpen]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CarouselContainer, {
    isDesktopZoomed: isDesktopZoomed,
    ref: containerRef
  }, /*#__PURE__*/_react["default"].createElement(NoZoom, null), /*#__PURE__*/_react["default"].createElement(ZoomPrompt, {
    open: firstOpen
  }, "Double click to zoom"), /*#__PURE__*/_react["default"].createElement(Carousel, {
    isZoomed: isZoomed,
    isDesktopZoomed: isDesktopZoomed
  }, /*#__PURE__*/_react["default"].createElement(ImagesWrapper, {
    axis: axis
  }, imagesAndVideos.map(function (data, i) {
    if (video && i === 1) {
      var _video$sources;

      return /*#__PURE__*/_react["default"].createElement(ImageContainer, {
        isSelected: selectedImageIndex === i
      }, /*#__PURE__*/_react["default"].createElement("video", {
        style: {
          height: '100%'
        },
        width: "100%",
        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
        });
      })));
    }

    var image = data.large;
    return /*#__PURE__*/_react["default"].createElement(ImageContainer, {
      isSelected: selectedImageIndex === i,
      isNotCurrent: activeDot !== i,
      key: "Image__" + image.url + "--" + image.width + "x" + image.height + "-" + i
    }, /*#__PURE__*/_react["default"].createElement(_lib.ZoomImageWrapper, (0, _extends2["default"])({
      isSelected: activeDot === i,
      isLast: i === imagesAndVideos.length - 1,
      activeDot: activeDot
    }, imageWrapperProps), /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
      src: image.url,
      width: image.width,
      height: image.height,
      backgroundOverImage: true
    })));
  })))), Boolean(imagesAndVideos.length) && /*#__PURE__*/_react["default"].createElement(DesktopNavigationContainer, null, /*#__PURE__*/_react["default"].createElement(UpArrow, {
    isDisabled: !prevBtnEnabled,
    onClick: scrollPrev
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    color: theme.palette.hint,
    direction: "up"
  })), /*#__PURE__*/_react["default"].createElement(PaginationLabel, null, activeDot + 1, /*#__PURE__*/_react["default"].createElement("span", {
    className: "mx-2 d-block"
  }, "/"), imagesAndVideos.length), /*#__PURE__*/_react["default"].createElement(DownArrow, {
    isDisabled: !nextBtnEnabled,
    onClick: scrollNext
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    color: theme.palette.hint,
    direction: "down"
  }))), Boolean(imagesAndVideos.length) && /*#__PURE__*/_react["default"].createElement(NavigationContainer, null, /*#__PURE__*/_react["default"].createElement(LeftArrow, {
    isDisabled: !prevBtnEnabled,
    onClick: scrollPrev
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    direction: "left"
  })), /*#__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
    });
  })), /*#__PURE__*/_react["default"].createElement(RightArrow, {
    isDisabled: !nextBtnEnabled,
    onClick: scrollNext
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    direction: "right"
  }))));
};

exports.ProductImageCarousel = ProductImageCarousel;

var CarouselContainer = _styledComponents["default"].div.attrs({
  className: 'mx-lg-auto align-items-center '
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  overflow: ", ";\n  height: 100%;\n\n  & > div {\n    height: 100%;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 70rem;\n    height: 100%;\n  }\n"])), function (props) {
  return props.isDesktopZoomed ? 'visible' : 'auto';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var NoZoom = (0, _styledComponents.createGlobalStyle)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  body{\n    touch-action: manipulation;\n  }\n"])));
var ZoomPrompt = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5,
  className: 'd-md-none'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  opacity: ", ";\n  pointer-events: none;\n  width: 17rem;\n  position: absolute;\n  border-radius: 10rem;\n  padding: 0.2rem;\n  box-shadow: 0 0 0 0.2rem ", ";\n  top: 50%;\n  left: 50%;\n  margin-left: -8.5rem;\n  z-index: 20;\n  text-align: center;\n  transition: opacity 0.8s cubic-bezier(0.23, 0.58, 0.01, 1.045);\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.grey;
}, function (props) {
  return props.open ? '0.7' : '0';
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
});

var ImagesWrapper = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: "d-flex " + (props.axis === 'y' ? 'flex-column' : 'align-items-center')
  };
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    height: 100%;\n    width: 100vw;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 70rem;\n    height: 100vh;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.max;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.lg.min;
});

var Dot = _styledComponents["default"].div.attrs({
  className: 'mr-1'
})(_templateObject5 || (_templateObject5 = (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.light;
});

var NavigationContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex d-lg-none justify-content-between align-items-center px-4'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  bottom: 0;\n  height: 6.6rem;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.secondary;
});

var DotListContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center pl-1'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var DesktopNavigationContainer = _styledComponents["default"].div.attrs({
  className: 'd-none d-lg-flex flex-column justify-content-center align-items-center'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 6rem;\n  left: 6rem;\n"])));

var PaginationLabel = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center py-3'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: bold;\n  text-align: center;\n  user-select: none;\n"])));

var Arrow = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center align-items-center'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  pointer-events: ", ";\n  opacity: ", ";\n"])), function (props) {
  return props.isDisabled ? 'none' : 'all';
}, function (props) {
  return props.isDisabled ? '0.4' : '1';
});

var LeftArrow = (0, _styledComponents["default"])(Arrow)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var RightArrow = (0, _styledComponents["default"])(Arrow)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var DesktopArrow = (0, _styledComponents["default"])(Arrow)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n\n  transform: scale(1.4);\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.disabled;
});
var UpArrow = (0, _styledComponents["default"])(DesktopArrow)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var DownArrow = (0, _styledComponents["default"])(DesktopArrow)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ImageContainer = _styledComponents["default"].div.attrs({
  className: 'mx-lg-auto'
})(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: calc(100% + 0.2rem);\n  max-width: calc(100% + 0.2rem);\n  position: relative;\n"])));
//# sourceMappingURL=index.js.map