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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { SingleItem } from './Components/SingleItem';
import { useOrdersList, useLocalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { NavigationSkeleton } from '../NavigationSkeleton';
import { useEffect } from 'react';
export var OrderHistory = () => {
  var [hasMore, setHasMore] = React.useState(true);
  var [allOrders, setAllOrders] = React.useState();
  var [orderCount, setOrderCount] = React.useState();
  var [lastIndex, setLastIndex] = React.useState(10);
  var {
    data,
    fetchMore,
    isLoading
  } = useOrdersList({
    limit: lastIndex
  });
  var labels = useLocalLabels();
  useEffect(() => {
    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 = () => {
    setLastIndex(lastIndex + 10);

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

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

  return /*#__PURE__*/React.createElement(NavigationSkeleton, {
    url: "order-history",
    header: "Order history"
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(InfiniteScroll, {
    dataLength: allOrders ? allOrders.length : 0,
    hasMore: hasMore,
    loader: isLoading && /*#__PURE__*/React.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((order, i) => {
    return /*#__PURE__*/React.createElement(SingleItem, {
      key: "Order-" + order._id + "--" + i,
      order: order
    });
  })))))));
};
var Container = styled.div.attrs({
  className: 'pt-3 pb-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 13px;\n  border-bottom: 1px solid #f0f0f0;\n"])));
var Inner = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  flex: 1;\n"])));
var ContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n\n  @media screen and (max-width: 991px) {\n    flex: 1 1 100%;\n  }\n"])));
//# sourceMappingURL=index.js.map