/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2019
 */

import React from 'react';
import PropTypes from 'prop-types';

import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import { COMPONENT_HEIGHT } from '../../globalStyles';

/**
 * Generic choice list for use within a ModalContainer.
 *
 * On selecting a choice, returns the object which was selected, the index/row
 * within the data array and the field which was displayed to the user.
 * @prop  {array}   data                Array of objects from which a choice must be made from
 * @prop  {string}  keyToDisplay        The object property which should be displayed to the user
 * @prop  {func}    onPress             Function to call on selection returns {item, index, field}
 * @prop  {int}     highlightIndex      Index in `data` for which object should be 'highlighted'
 * @prop  {string}  highlightValue      Alternate to highlightIndex, using the value over index.
 * @prop  {func}    renderLeftComponent Renders a component to the left of the text in a row.
 *
 * NOTE: If there are multiple, equal values used in highlightValue within the data array,
 * multiple values will be highlighted.
 */
export const GenericChoiceList = React.memo(
  ({ keyToDisplay, onPress, data, highlightIndex, highlightValue, renderLeftComponent }) => {
    const keyExtractor = React.useCallback(
      (item, index) => {
        const content = keyToDisplay && item ? item[keyToDisplay] : item;
        return `${content}${index}`;
      },
      [keyToDisplay]
    );

    const renderRow = React.useCallback(
      ({ item, index }) => {
        const { row, text } = localStyles;

        let shouldHighlight = false;
        if (keyToDisplay && highlightValue) shouldHighlight = item[keyToDisplay] === highlightValue;
        else if (!highlightValue) shouldHighlight = index === highlightIndex;

        const rowStyle = shouldHighlight ? { ...row, backgroundColor: '#E95C30' } : row;
        const textStyle = shouldHighlight ? { ...text, color: '#FFF' } : text;

        return (
          <TouchableOpacity onPress={() => onPress({ item, index, keyToDisplay })}>
            <View style={rowStyle}>
              {renderLeftComponent ? renderLeftComponent(item) : null}
              <Text style={textStyle}>{keyToDisplay ? item[keyToDisplay] : item}</Text>
            </View>
          </TouchableOpacity>
        );
      },
      [keyToDisplay, highlightValue, highlightIndex]
    );

    if (!data) return null;
    return (
      <FlatList
        data={data}
        renderItem={renderRow}
        style={localStyles.list}
        keyExtractor={keyExtractor}
      />
    );
  }
);

const localStyles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    paddingLeft: 30,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    height: COMPONENT_HEIGHT,
  },
  list: {
    marginTop: 10,
    minWidth: '70%',
  },
  text: {
    fontSize: 20,
    marginLeft: 20,
  },
});

GenericChoiceList.defaultProps = {
  highlightIndex: 0,
  highlightValue: null,
  renderLeftComponent: null,
};

GenericChoiceList.propTypes = {
  keyToDisplay: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
  highlightIndex: PropTypes.number,
  highlightValue: PropTypes.string,
  renderLeftComponent: PropTypes.func,
};

@@ -261,16 +261,35 @@
 import %7B
+ textStyles, WHITE,
  COMPONE
@@ -327,16 +327,16 @@
 tyles';%0A
-
 %0A/**%0A * 
@@ -1122,16 +1122,113 @@
  a row.%0A
+ * @prop  %7Bstring%7D  placeholderText     Text used when there are no items to render in the list.%0A
  *%0A * NO
@@ -1406,16 +1406,20 @@
 mo(%0A  (%7B
+%0A   
  keyToDi
@@ -1424,16 +1424,20 @@
 Display,
+%0A   
  onPress
@@ -1441,14 +1441,22 @@
 ess,
+%0A   
  data,
+%0A   
  hig
@@ -1467,16 +1467,20 @@
 htIndex,
+%0A   
  highlig
@@ -1487,16 +1487,20 @@
 htValue,
+%0A   
  renderL
@@ -1511,16 +1511,40 @@
 omponent
+,%0A    placeholderText,%0A 
  %7D) =%3E %7B
@@ -2866,16 +2866,112 @@
 ractor%7D%0A
+        ListEmptyComponent=%7B%3CText style=%7BlocalStyles.placeholderText%7D%3E%7BplaceholderText%7D%3C/Text%3E%7D%0A
       /%3E
@@ -3259,16 +3259,29 @@
  '70%25',%0A
+    flex: 1,%0A
   %7D,%0A  t
@@ -3330,16 +3330,160 @@
 0,%0A  %7D,%0A
+  placeholderText: %7B%0A    ...textStyles,%0A    color: WHITE,%0A    justifyContent: 'center',%0A    alignItems: 'center',%0A    textAlign: 'center',%0A  %7D,%0A
 %7D);%0A%0AGen
@@ -3588,16 +3588,39 @@
 : null,%0A
+  placeholderText: '',%0A
 %7D;%0A%0AGene
@@ -3879,16 +3879,16 @@
 string,%0A
-
   render
@@ -3918,11 +3918,48 @@
 s.func,%0A
+  placeholderText: PropTypes.string,%0A
 %7D;%0A

Add updated GenericChoiceList component