import { useOrders } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function OrderHistory() {
  const { orders, loading, error, refetch } = useOrders();

  if (loading && orders.length === 0) return <Loading />;

  return (
    <FlashList
      data={orders}
      renderItem={({ item }) => (
        <OrderCard
          orderNumber={item.orderNumber}
          date={item.processedAt}
          total={item.totalPrice}
          status={`${item.financialStatus} / ${item.fulfillmentStatus}`}
          items={item.lineItems?.edges?.map(e => e.node)}
        />
      )}
      estimatedItemSize={120}
      onRefresh={refetch}
      refreshing={loading}
    />
  );
}

function useOrders(): {
  orders: unknown[];           // array of order nodes
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

const { customer } = useStackfront();
const orders = await customer.getOrders(); // returns array of order nodes