"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.VariantsCarousel = VariantsCarousel;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _Icons = require("../../../Icons");

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

function VariantsCarousel(props) {
  var axis = props.axis,
      slides = props.slides,
      renderSlide = props.renderSlide;

  var _useCarousel = (0, _lib.useCarousel)({
    containScroll: 'trimSnaps',
    align: 'start',
    axis: axis
  }),
      Carousel = _useCarousel[0],
      carousel = _useCarousel[1];

  var _useState = (0, _react.useState)(false),
      prevBtnEnabled = _useState[0],
      setPrevBtnEnabled = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      nextBtnEnabled = _useState2[0],
      setNextBtnEnabled = _useState2[1];

  var scrollPrev = (0, _react.useCallback)(function () {
    return carousel == null ? void 0 : carousel.scrollPrev();
  }, [carousel]);
  var scrollNext = (0, _react.useCallback)(function () {
    return carousel == null ? void 0 : carousel.scrollNext();
  }, [carousel]);
  (0, _react.useEffect)(function () {
    if (carousel) {
      var onSelect = function 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["default"].createElement(Container, null, !hideArrows && /*#__PURE__*/_react["default"].createElement(PrevButtonContainer, {
    hide: hideArrows,
    isDisabled: !prevBtnEnabled,
    onClick: prevBtnEnabled ? scrollPrev : undefined
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconAnimatedArrow, {
    direction: "left"
  })), /*#__PURE__*/_react["default"].createElement(CarouselContainer, null, /*#__PURE__*/_react["default"].createElement(Carousel, null, /*#__PURE__*/_react["default"].createElement(Wrapper, {
    axis: axis
  }, slides == null ? void 0 : slides.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(SlideContainer, {
      key: 'Slide__' + (item.id || item._id || index)
    }, renderSlide(item));
  })))), !hideArrows && /*#__PURE__*/_react["default"].createElement(NextButtonContainer, {
    hide: hideArrows,
    isDisabled: !nextBtnEnabled,
    onClick: nextBtnEnabled ? scrollNext : undefined
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconAnimatedArrow, {
    direction: "right"
  })));
}

var SPACE_BETWEEN_SLIDES = '0.8rem';

var Container = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 100%;\n  width: 100%;\n"])));

var CarouselContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: calc(100% - 9rem);\n"])));

var SlideContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Wrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n\n  ", "\n"])), function (props) {
  return props.axis === 'y' ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n          flex-direction: column;\n          margin-top: -", ";\n\n          & > div {\n            padding-top: ", ";\n          }\n        "])), SPACE_BETWEEN_SLIDES, SPACE_BETWEEN_SLIDES) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\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 = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  opacity: ", ";\n"])), function (props) {
  if (props.hide) return 0;
  return props.isDisabled ? 0.3 : 1;
});

var PrevButtonContainer = (0, _styledComponents["default"])(ButtonContainer).attrs({
  className: 'pr-3 pl-2'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var NextButtonContainer = (0, _styledComponents["default"])(ButtonContainer).attrs({
  className: 'pl-3 pr-2'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map