import React from 'react';
import { useConfig } from 'ordering-components-external/native';
import {
  ActiveOrdersContainer
} from './styles';
import { View } from 'react-native';

import { ActiveOrdersParams } from '../../types';
import { useTheme } from 'styled-components/native';
import { SingleOrderCard } from '../SingleOrderCard';

export const ActiveOrders = (props: ActiveOrdersParams) => {
  const {
    onNavigationRedirect,
    orders,
    pagination,
    loadMoreOrders,
    getOrderStatus,
    isMessageView,
    handleClickOrder,
    handleUpdateOrderList
  } = props;

  const theme = useTheme();
  const [{ configs }] = useConfig();

  return (
    <>
      <ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
        {orders.length > 0 &&
          orders.map((order: any, index: any) => (
            <SingleOrderCard
              key={index}
              order={order}
              handleClickOrder={handleClickOrder}
              isMessageView={isMessageView}
              getOrderStatus={getOrderStatus}
              onNavigationRedirect={onNavigationRedirect}
              handleUpdateOrderList={handleUpdateOrderList}
            />
          ))}
      </ActiveOrdersContainer>
      <View
        style={{
          height: 8,
          backgroundColor: theme.colors.backgroundGray100,
          marginHorizontal: -40,
        }}
      />
    </>
  );
};