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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React, { useCallback, useEffect, useState } from 'react';
import { useCarousel } from '@sentecacommerce-theme/lib';
import { LazyResponsiveImage } from '../../../../../Common';
import styled from 'styled-components';
export var MobileCarousel = (_ref) => {
  var {
    images,
    openImageModal,
    video
  } = _ref;
  var imagesAndVideos = images == null ? void 0 : images.slice();

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

  var [activeDot, setActiveDot] = useState(0);
  var [Carousel, carousel] = useCarousel({
    containScroll: 'trimSnaps',
    align: 'start' // loop: true,

  });
  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]);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement(ImagesWrapper, null, imagesAndVideos == null ? void 0 : imagesAndVideos.map((data, i) => {
    if (video && i === 1) {
      var _video$sources;

      return /*#__PURE__*/React.createElement(ImageContainer, {
        key: "Video__" + i,
        isVideo: true
      }, /*#__PURE__*/React.createElement("video", {
        width: "100%",
        height: "auto",
        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
      }))));
    }

    return /*#__PURE__*/React.createElement(ImageContainer, {
      key: "Image__" + i,
      onClick: openImageModal(i)
    }, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
      imagesMap: data,
      breakpointSizes: {
        xs: '100vw',
        sm: '100vw',
        md: '100vw',
        lg: '25vw'
      },
      defaultImageWidth: "100vw"
    }));
  }))), /*#__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
    });
  })));
};
var ImagesWrapper = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.div.attrs({
  className: 'd-lg-none mb-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  background-color: #f3f3f3;\n"])));
var Dot = styled.div.attrs({
  className: 'mx-1'
})(_templateObject3 || (_templateObject3 = _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.secondary);
var DotListContainer = styled.div.attrs({
  className: 'd-flex justify-content-center'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 2rem;\n  left: 0;\n  width: 100%;\n"])));
var ImageContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), props => props.isVideo && '#f3f3f3');
//# sourceMappingURL=index.js.map