"use strict";

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

exports.__esModule = true;
exports.Basket = void 0;

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

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

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

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

var _Components = require("./Components");

var _Common = require("../Common");

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

var Basket = function Basket(_ref) {
  var title = _ref.title,
      labels = _ref.labels;

  var _myCartApi$useGet = _lib.myCartApi.useGet(),
      data = _myCartApi$useGet.data;

  var _useOrderPrice = (0, _lib.useOrderPrice)(),
      totalDiscount = _useOrderPrice.totalDiscount,
      subtotal = _useOrderPrice.subtotal;

  var totalProductsCount = (0, _lib.useBasketTotalCount)();

  var _useBasketItemErrorRe = (0, _lib.useBasketItemErrorRef)(),
      errorRef = _useBasketItemErrorRe.errorRef,
      getFirstError = _useBasketItemErrorRe.getFirstError;

  var isBasketEmpty = totalProductsCount === 0;

  var _usePrice = (0, _lib.usePrice)({
    price: subtotal
  }),
      totalPrice = _usePrice.price;

  var _usePrice2 = (0, _lib.usePrice)({
    price: totalDiscount
  }),
      totalDiscounted = _usePrice2.price;

  var _useBoolean = (0, _lib.useBoolean)(),
      translateSummary = _useBoolean[0],
      setTranslateSummary = _useBoolean[1];

  var _useUIState = (0, _lib.useUIState)(),
      displayNavbar = _useUIState.displayNavbar;

  _react["default"].useEffect(function () {
    function onScroll() {
      var currentPosition = window.pageYOffset;

      if (currentPosition > 160 && displayNavbar) {
        setTranslateSummary.on();
      } else {
        setTranslateSummary.off();
      }
    }

    window.addEventListener('scroll', onScroll);
    return function () {
      return window.removeEventListener('scroll', onScroll);
    };
  }, [displayNavbar, setTranslateSummary]);

  return /*#__PURE__*/_react["default"].createElement(_lib.LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_Components.MobileHeader, {
    displayValue: totalPrice.displayValue,
    displayCount: totalProductsCount,
    title: title,
    itemsText: labels.itemsText
  }), /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(ListWrapper, null, /*#__PURE__*/_react["default"].createElement(Header, null, title), !isBasketEmpty && !data && /*#__PURE__*/_react["default"].createElement(LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Spinner, null)), isBasketEmpty && data && /*#__PURE__*/_react["default"].createElement(EmptyBasketContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, labels.empty)), !isBasketEmpty && data && /*#__PURE__*/_react["default"].createElement(_Components.ProductsList, {
    errorRef: errorRef
  })), /*#__PURE__*/_react["default"].createElement(SummaryWrapper, null, /*#__PURE__*/_react["default"].createElement(_Components.Summary, {
    translateSummary: translateSummary,
    isEmpty: isBasketEmpty,
    displayValue: totalPrice.displayValue,
    totalDiscount: totalDiscount && totalDiscounted.displayValue,
    labels: labels.summary,
    getFirstElementWithError: getFirstError
  })))));
};

exports.Basket = Basket;

var Header = _styledComponents["default"].h4.attrs({
  className: 'd-md-block'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 500;\n  font-size: 2.2rem;\n  line-height: 1.5;\n\n  display: none;\n  margin-top: 0.3rem;\n"])));

var Container = _styledComponents["default"].div.attrs({
  className: 'container-fluid py-5 mx-auto'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 110rem !important;\n"])));

var LoaderContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 28rem;\n  position: relative;\n"])));

var EmptyBasketContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  height: 7rem;\n\n  @media (min-width: ", ") {\n    height: 28rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
});

var ListWrapper = _styledComponents["default"].div.attrs({
  className: 'col-12 col-lg-8'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var SummaryWrapper = _styledComponents["default"].div.attrs({
  className: 'col-12 col-lg-4 pt-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    position: relative;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.max;
});

var Inner = _styledComponents["default"].div.attrs({
  className: 'row'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=basket.component.js.map