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

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

import React, { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
import { useCarousel } from '@sentecacommerce-theme/lib';
import { HeaderComponent } from '../../../Common/HeaderComponent';
import { PrevButton, NextButton } from './Components';
import { PreviewCarousel } from './Components/PreviewCarousel';
export function CarouselComponent(props) {
  var {
    header,
    withArrows,
    small,
    slides,
    renderSlide,
    onChange,
    thumbnailImgForVideo
  } = props;
  var [Carousel, carousel] = useCarousel({
    containScroll: 'trimSnaps',
    align: 'start'
  });
  var [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  var [nextBtnEnabled, setNextBtnEnabled] = useState(false);
  var scrollPrev = useCallback(() => carousel == null ? void 0 : carousel.scrollPrev(), [carousel]);
  var scrollNext = useCallback(() => carousel == null ? void 0 : carousel.scrollNext(), [carousel]);
  useEffect(() => {
    if (carousel) {
      var onSelect = () => {
        if (onChange) onChange(carousel);
        carousel.selectedScrollSnap() && carousel.canScrollPrev && setPrevBtnEnabled(carousel.canScrollPrev());
        carousel.canScrollNext && setNextBtnEnabled(carousel.canScrollNext());
      };

      carousel.on && carousel.on('select', onSelect);
      onSelect();
    }
  }, [carousel]);
  return /*#__PURE__*/React.createElement(Container, null, header && /*#__PURE__*/React.createElement(HeaderComponent, {
    data: header,
    small: small
  }), /*#__PURE__*/React.createElement(CarouselContentContainer, null, /*#__PURE__*/React.createElement(CarouselContentWrapper, null, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement(Wrapper, null, slides == null ? void 0 : slides.map((item, index) => /*#__PURE__*/React.createElement(SlideContainer, {
    key: 'Slide__' + (item.id || index)
  }, renderSlide(item)))), withArrows && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PrevButton, {
    onClick: scrollPrev,
    enabled: prevBtnEnabled
  }), /*#__PURE__*/React.createElement(NextButton, {
    onClick: scrollNext,
    enabled: nextBtnEnabled
  })))))), /*#__PURE__*/React.createElement(PreviewCarousel, {
    slides: slides,
    thumbnailImageForVideo: thumbnailImgForVideo,
    currentSlide: carousel == null ? void 0 : carousel.selectedScrollSnap(),
    slideToIndex: index => carousel == null ? void 0 : carousel.scrollTo(index),
    parentCarousel: carousel
  }));
}
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n\n  max-height: 50rem;\n"])));
var SlideContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 auto;\n  position: relative;\n  width: 100%;\n  cursor: pointer;\n\n  flex-direction: column;\n  display: flex;\n\n  max-height: 50rem;\n\n  @media (min-width: ", ") {\n    padding-left: 2.4rem;\n  }\n\n  @media (min-width: ", ") {\n    width: 100%;\n  }\n\n  @media (min-width: ", ") {\n    width: 100%;\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.md.min;
}, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.xxl.min;
});
var CarouselContentContainer = styled.figure(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  @media screen and (min-width: ", ") {\n    margin-left: auto;\n    margin-right: auto;\n  }\n  display: block;\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.xxl.min;
});
var CarouselContentWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  @media screen and (min-width: ", ") {\n    margin: 0 auto;\n    max-width: 179.2rem;\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.xxl.min;
});
var Inner = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  max-height: 50rem;\n"])));
var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-left: ", ";\n\n  @media (min-width: ", ") {\n    margin-left: ", ";\n  }\n"])), '-1.6rem'
/* This negative is used for evening out the padding-left spacing between slides */
, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.min;
}, '-2.4rem'
/* This negative is used for evening out the padding left spacing between slides for min-width: 640px screens. */
);
//# sourceMappingURL=index.js.map