import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";

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

import React, { useCallback, useEffect, useState } from 'react';
import { useCarousel, useZoom, useConfigState, ZoomImageWrapper } from '@sentecacommerce-theme/lib';
import { IconAnimatedArrow, LazyImage, Typography } from '../../../../../Common';
import styled, { createGlobalStyle } from 'styled-components';
export var ProductImageCarousel = (_ref) => {
  var {
    images,
    axis,
    selectedImageIndex,
    video
  } = _ref;
  var [Carousel, carousel] = useCarousel({
    containScroll: 'trimSnaps',
    align: 'start',
    startIndex: selectedImageIndex,
    axis
  });
  var {
    theme
  } = useConfigState();
  var imagesAndVideos = images.slice();

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

  var [activeDot, setActiveDot] = useState(selectedImageIndex);
  var [prevBtnEnabled, setPrevBtnEnabled] = useState(selectedImageIndex > 0);
  var [nextBtnEnabled, setNextBtnEnabled] = useState(selectedImageIndex < imagesAndVideos.length - 1);
  var {
    isZoomed,
    isDesktopZoomed,
    containerRef,
    imageWrapperProps
  } = useZoom({
    carousel: carousel
  });
  var scrollPrev = useCallback(() => carousel == null ? void 0 : carousel.scrollPrev(), [carousel]);
  var scrollNext = useCallback(() => carousel == null ? void 0 : carousel.scrollNext(), [carousel]);
  var gotToSlide = useCallback(slideIndex => {
    carousel == null ? void 0 : carousel.scrollTo(slideIndex);
  }, [carousel]);
  useEffect(() => {
    carousel == null ? void 0 : carousel.on('select', () => {
      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 = useCallback(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]);
  useEffect(() => {
    window.addEventListener('wheel', onWheel);
    return () => {
      window.removeEventListener('wheel', onWheel);
    };
  }, [onWheel]); // close zoom prompt after 2sec

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

      return /*#__PURE__*/React.createElement(ImageContainer, {
        isSelected: selectedImageIndex === i
      }, /*#__PURE__*/React.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((source, index) => /*#__PURE__*/React.createElement("source", {
        key: index,
        src: source.url
      }))));
    }

    var image = data.large;
    return /*#__PURE__*/React.createElement(ImageContainer, {
      isSelected: selectedImageIndex === i,
      isNotCurrent: activeDot !== i,
      key: "Image__" + image.url + "--" + image.width + "x" + image.height + "-" + i
    }, /*#__PURE__*/React.createElement(ZoomImageWrapper, _extends({
      isSelected: activeDot === i,
      isLast: i === imagesAndVideos.length - 1,
      activeDot: activeDot
    }, imageWrapperProps), /*#__PURE__*/React.createElement(LazyImage, {
      src: image.url,
      width: image.width,
      height: image.height,
      backgroundOverImage: true
    })));
  })))), Boolean(imagesAndVideos.length) && /*#__PURE__*/React.createElement(DesktopNavigationContainer, null, /*#__PURE__*/React.createElement(UpArrow, {
    isDisabled: !prevBtnEnabled,
    onClick: scrollPrev
  }, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    color: theme.palette.hint,
    direction: "up"
  })), /*#__PURE__*/React.createElement(PaginationLabel, null, activeDot + 1, /*#__PURE__*/React.createElement("span", {
    className: "mx-2 d-block"
  }, "/"), imagesAndVideos.length), /*#__PURE__*/React.createElement(DownArrow, {
    isDisabled: !nextBtnEnabled,
    onClick: scrollNext
  }, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    color: theme.palette.hint,
    direction: "down"
  }))), Boolean(imagesAndVideos.length) && /*#__PURE__*/React.createElement(NavigationContainer, null, /*#__PURE__*/React.createElement(LeftArrow, {
    isDisabled: !prevBtnEnabled,
    onClick: scrollPrev
  }, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: "left"
  })), /*#__PURE__*/React.createElement(DotListContainer, null, Array((imagesAndVideos == null ? void 0 : imagesAndVideos.length) || 0).fill(1).map((_, i) => {
    return /*#__PURE__*/React.createElement(Dot, {
      key: "Dot__" + i,
      onClick: () => gotToSlide(i),
      isSelected: activeDot === i
    });
  })), /*#__PURE__*/React.createElement(RightArrow, {
    isDisabled: !nextBtnEnabled,
    onClick: scrollNext
  }, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: "right"
  }))));
};
var CarouselContainer = styled.div.attrs({
  className: 'mx-lg-auto align-items-center '
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.isDesktopZoomed ? 'visible' : 'auto', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var NoZoom = createGlobalStyle(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  body{\n    touch-action: manipulation;\n  }\n"])));
var ZoomPrompt = styled(Typography).attrs({
  variant: 5,
  className: 'd-md-none'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.grey;
}, props => props.open ? '0.7' : '0', (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
});
var ImagesWrapper = styled.div.attrs(props => ({
  className: "d-flex " + (props.axis === 'y' ? 'flex-column' : 'align-items-center')
}))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.max;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.lg.min;
});
var Dot = styled.div.attrs({
  className: 'mr-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), props => props.isSelected ? props.theme.palette.primary : props.theme.palette.light);
var NavigationContainer = styled.div.attrs({
  className: 'd-flex d-lg-none justify-content-between align-items-center px-4'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0;\n  height: 6.6rem;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.secondary;
});
var DotListContainer = styled.div.attrs({
  className: 'd-flex justify-content-center pl-1'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var DesktopNavigationContainer = styled.div.attrs({
  className: 'd-none d-lg-flex flex-column justify-content-center align-items-center'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 6rem;\n  left: 6rem;\n"])));
var PaginationLabel = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center py-3'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  text-align: center;\n  user-select: none;\n"])));
var Arrow = styled.div.attrs({
  className: 'd-flex justify-content-center align-items-center'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  pointer-events: ", ";\n  opacity: ", ";\n"])), props => props.isDisabled ? 'none' : 'all', props => props.isDisabled ? '0.4' : '1');
var LeftArrow = styled(Arrow)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
var RightArrow = styled(Arrow)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose([""])));
var DesktopArrow = styled(Arrow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n\n  transform: scale(1.4);\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.disabled;
});
var UpArrow = styled(DesktopArrow)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose([""])));
var DownArrow = styled(DesktopArrow)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose([""])));
var ImageContainer = styled.div.attrs({
  className: 'mx-lg-auto'
})(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  min-width: calc(100% + 0.2rem);\n  max-width: calc(100% + 0.2rem);\n  position: relative;\n"])));
//# sourceMappingURL=index.js.map