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

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

import React, { useEffect, useState, useCallback } from 'react';
import { useCarousel } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { PrevButton, NextButton } from '../Buttons';
export var PreviewCarousel = (_ref) => {
  var {
    slides,
    currentSlide,
    slideToIndex,
    thumbnailImageForVideo,
    parentCarousel
  } = _ref;
  var [Carousel, carousel] = useCarousel({
    containScroll: 'trimSnaps',
    axis: 'x',
    startIndex: currentSlide,
    align: 'start'
  });
  var [prevBtnEnabled, setPrevBtnEnabled] = useState(true);
  var [nextBtnEnabled, setNextBtnEnabled] = useState(true);
  parentCarousel == null ? void 0 : parentCarousel.on('init', () => {
    carousel == null ? void 0 : carousel.reInit();
  });
  var scrollPrev = useCallback(() => parentCarousel == null ? void 0 : parentCarousel.scrollPrev(), [parentCarousel]);
  var scrollNext = useCallback(() => parentCarousel == null ? void 0 : parentCarousel.scrollNext(), [parentCarousel]);
  useEffect(() => {
    carousel == null ? void 0 : carousel.scrollTo(currentSlide);
  }, [currentSlide]);

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

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(SlidesContainer, null, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement(SlidesWrapper, null, slides == null ? void 0 : slides.map((slide, index) => {
    var image = slide == null ? void 0 : slide.url;
    return /*#__PURE__*/React.createElement(Slide, {
      onClick: handleSlideClick(index),
      key: "image_" + image
    }, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(Image, {
      src: !image.includes('youtube') ? image : thumbnailImageForVideo,
      alt: "",
      isSelected: index === currentSlide
    })));
  })))), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PrevButton, {
    onClick: scrollPrev,
    enabled: prevBtnEnabled
  }), /*#__PURE__*/React.createElement(NextButton, {
    onClick: scrollNext,
    enabled: nextBtnEnabled
  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var SlidesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 0;\n  position: relative;\n  z-index: 1;\n\n  overflow: hidden;\n"])));
var SlidesWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  padding-bottom: 0;\n  display: flex;\n  flex-direction: row;\n  margin-left: -1rem;\n"])));
var Slide = styled.figure(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  cursor: pointer;\n  min-width: 10rem;\n  max-width: 10rem;\n  padding-left: 1rem;\n"])));
var ImageContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var Image = styled.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), props => props.isSelected ? 1 : '0.6', props => props.isSelected ? "" + props.theme.palette.light : 'unset', (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map