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

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

import React from 'react';
import styled from 'styled-components';
import { myCartApi, usePrice, useBasketTotalCount, useOrderPrice, useUIState, useBasketItemErrorRef, LocalLabelsProvider, useBoolean } from '@sentecacommerce-theme/lib';
import { MobileHeader, ProductsList, Summary } from './Components';
import { Spinner } from '../Common';

var Basket = (_ref) => {
  var {
    title,
    labels
  } = _ref;
  var {
    data
  } = myCartApi.useGet();
  var {
    totalDiscount,
    subtotal
  } = useOrderPrice();
  var totalProductsCount = useBasketTotalCount();
  var {
    errorRef,
    getFirstError
  } = useBasketItemErrorRef();
  var isBasketEmpty = totalProductsCount === 0;
  var {
    price: totalPrice
  } = usePrice({
    price: subtotal
  });
  var {
    price: totalDiscounted
  } = usePrice({
    price: totalDiscount
  });
  var [translateSummary, setTranslateSummary] = useBoolean();
  var {
    displayNavbar
  } = useUIState();
  React.useEffect(() => {
    function onScroll() {
      var currentPosition = window.pageYOffset;

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

    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, [displayNavbar, setTranslateSummary]);
  return /*#__PURE__*/React.createElement(LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(MobileHeader, {
    displayValue: totalPrice.displayValue,
    displayCount: totalProductsCount,
    title: title,
    itemsText: labels.itemsText
  }), /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(Header, null, title), !isBasketEmpty && !data && /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(Spinner, null)), isBasketEmpty && data && /*#__PURE__*/React.createElement(EmptyBasketContainer, null, /*#__PURE__*/React.createElement("span", null, labels.empty)), !isBasketEmpty && data && /*#__PURE__*/React.createElement(ProductsList, {
    errorRef: errorRef
  })), /*#__PURE__*/React.createElement(SummaryWrapper, null, /*#__PURE__*/React.createElement(Summary, {
    translateSummary: translateSummary,
    isEmpty: isBasketEmpty,
    displayValue: totalPrice.displayValue,
    totalDiscount: totalDiscount && totalDiscounted.displayValue,
    labels: labels.summary,
    getFirstElementWithError: getFirstError
  })))));
};

var Header = styled.h4.attrs({
  className: 'd-md-block'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled.div.attrs({
  className: 'container-fluid py-5 mx-auto'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  max-width: 110rem !important;\n"])));
var LoaderContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 28rem;\n  position: relative;\n"])));
var EmptyBasketContainer = styled.div.attrs({
  className: 'd-flex'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  height: 7rem;\n\n  @media (min-width: ", ") {\n    height: 28rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var ListWrapper = styled.div.attrs({
  className: 'col-12 col-lg-8'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var SummaryWrapper = styled.div.attrs({
  className: 'col-12 col-lg-4 pt-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    position: relative;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
});
var Inner = styled.div.attrs({
  className: 'row'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
export { Basket };
//# sourceMappingURL=basket.component.js.map