import * as React from 'react';

import { Package, PackageState } from '~/models';
import { testIdProps } from '~/test/utils';
import { Presets } from '~/theme';

import { PackageListItem } from './package-list-item';

type OnPress = (packageBarcode: string) => void;

// Bullet preset for each package state.
const bullet: Partial<Record<PackageState, Presets>> = {
  paired: 'success',
  unpaired: 'warning',
  'wrong-space': 'error',
};

/**
 * Closure function that receives the press method and return the
 * render function.
 *
 * Outer context:
 *
 * @param {Function} onPress Function called when the item is pressed.
 *
 * Inner context:
 *
 * @param {Package} pckg Item object to be rendered.
 * @param {number} index Index of the item in the array.
 */
export function renderPackageListItem(onPress: OnPress) {
  return function renderItemClosure(pckg: Package, index: number) {
    return (
      <PackageListItem
        key={`${index}-${pckg.barcode}`}
        barcode={pckg.barcode}
        bulletPreset={bullet[pckg.state]}
        currentSpace={pckg.currentSpace}
        hasSiblings={pckg.hasSiblings}
        isInWarehouse={pckg.isInWarehouse}
        retailer={pckg.retailer}
        routeSequence={pckg.routeSequence}
        onPress={onPress}
        {...testIdProps(`package-list-item-${index}`)}
      />
    );
  };
}
