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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;

import React, { useCallback, useEffect, useState } from 'react';
import styled, { css } from 'styled-components';
import { useCarousel } from '@sentecacommerce-theme/lib';
import { IconAnimatedArrow } from '../../../Icons';
export function VariantsCarousel(props) {
  var {
    axis,
    slides,
    renderSlide
  } = props;
  var [Carousel, carousel] = useCarousel({
    containScroll: 'trimSnaps',
    align: 'start',
    axis
  });
  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 = () => {
        carousel.selectedScrollSnap() && carousel.canScrollPrev && setPrevBtnEnabled(carousel.canScrollPrev());
        carousel.canScrollNext && setNextBtnEnabled(carousel.canScrollNext());
      };

      carousel.on && carousel.on('select', onSelect);
      onSelect();
    }
  }, [carousel]);
  var hideArrows = !prevBtnEnabled && !nextBtnEnabled;
  return /*#__PURE__*/React.createElement(Container, null, !hideArrows && /*#__PURE__*/React.createElement(PrevButtonContainer, {
    hide: hideArrows,
    isDisabled: !prevBtnEnabled,
    onClick: prevBtnEnabled ? scrollPrev : undefined
  }, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: "left"
  })), /*#__PURE__*/React.createElement(CarouselContainer, null, /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement(Wrapper, {
    axis: axis
  }, slides == null ? void 0 : slides.map((item, index) => /*#__PURE__*/React.createElement(SlideContainer, {
    key: 'Slide__' + (item.id || item._id || index)
  }, renderSlide(item)))))), !hideArrows && /*#__PURE__*/React.createElement(NextButtonContainer, {
    hide: hideArrows,
    isDisabled: !nextBtnEnabled,
    onClick: nextBtnEnabled ? scrollNext : undefined
  }, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: "right"
  })));
}
var SPACE_BETWEEN_SLIDES = '0.8rem';
var Container = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  width: 100%;\n"])));
var CarouselContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: calc(100% - 9rem);\n"])));
var SlideContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Wrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", "\n"])), props => props.axis === 'y' ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          flex-direction: column;\n          margin-top: -", ";\n\n          & > div {\n            padding-top: ", ";\n          }\n        "])), SPACE_BETWEEN_SLIDES, SPACE_BETWEEN_SLIDES) : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n          width: calc(100% + ", ");\n          max-width: calc(100% + ", ");\n\n          & > div {\n            padding-right: ", ";\n          }\n        "])), SPACE_BETWEEN_SLIDES, SPACE_BETWEEN_SLIDES, SPACE_BETWEEN_SLIDES));
var ButtonContainer = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  opacity: ", ";\n"])), props => {
  if (props.hide) return 0;
  return props.isDisabled ? 0.3 : 1;
});
var PrevButtonContainer = styled(ButtonContainer).attrs({
  className: 'pr-3 pl-2'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var NextButtonContainer = styled(ButtonContainer).attrs({
  className: 'pl-3 pr-2'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map