"use strict";

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

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

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

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

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

var _reactInfiniteScrollComponent = _interopRequireDefault(require("react-infinite-scroll-component"));

var _SingleItem = require("./Components/SingleItem");

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

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

var _NavigationSkeleton = require("../NavigationSkeleton");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var OrderHistory = function OrderHistory() {
  var _React$useState = _react["default"].useState(true),
      hasMore = _React$useState[0],
      setHasMore = _React$useState[1];

  var _React$useState2 = _react["default"].useState(),
      allOrders = _React$useState2[0],
      setAllOrders = _React$useState2[1];

  var _React$useState3 = _react["default"].useState(),
      orderCount = _React$useState3[0],
      setOrderCount = _React$useState3[1];

  var _React$useState4 = _react["default"].useState(10),
      lastIndex = _React$useState4[0],
      setLastIndex = _React$useState4[1];

  var _useOrdersList = (0, _lib.useOrdersList)({
    limit: lastIndex
  }),
      data = _useOrdersList.data,
      fetchMore = _useOrdersList.fetchMore,
      isLoading = _useOrdersList.isLoading;

  var labels = (0, _lib.useLocalLabels)();
  (0, _react.useEffect)(function () {
    var _data, _data2;

    setAllOrders(data == null ? void 0 : (_data = data[data.length - 1]) == null ? void 0 : _data.results);
    setOrderCount(data == null ? void 0 : (_data2 = data[data.length - 1]) == null ? void 0 : _data2.total);
  }, [lastIndex, data, allOrders, hasMore]);

  var getMore = function getMore() {
    setLastIndex(lastIndex + 10);

    if (orderCount && allOrders && (orderCount <= (allOrders == null ? void 0 : allOrders.length) || orderCount <= lastIndex)) {
      setHasMore(false);
    }

    fetchMore({
      limit: lastIndex
    });
    return;
  };

  return /*#__PURE__*/_react["default"].createElement(_NavigationSkeleton.NavigationSkeleton, {
    url: "order-history",
    header: "Order history"
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(_reactInfiniteScrollComponent["default"], {
    dataLength: allOrders ? allOrders.length : 0,
    hasMore: hasMore,
    loader: isLoading && /*#__PURE__*/_react["default"].createElement("p", {
      style: {
        textAlign: 'center',
        width: '100%'
      }
    }, labels.loading),
    next: getMore,
    style: {
      width: '100%',
      padding: '1rem'
    },
    scrollThreshold: 0.5
  }, allOrders == null ? void 0 : allOrders.map(function (order, i) {
    return /*#__PURE__*/_react["default"].createElement(_SingleItem.SingleItem, {
      key: "Order-" + order._id + "--" + i,
      order: order
    });
  })))))));
};

exports.OrderHistory = OrderHistory;

var Container = _styledComponents["default"].div.attrs({
  className: 'pt-3 pb-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  font-size: 13px;\n  border-bottom: 1px solid #f0f0f0;\n"])));

var Inner = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n"])));

var ContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 1;\n\n  @media screen and (max-width: 991px) {\n    flex: 1 1 100%;\n  }\n"])));
//# sourceMappingURL=index.js.map