/* eslint-disable react/require-default-props */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2016
 */

import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';

import { FlatList, StyleSheet, View, Text } from 'react-native';
import globalStyles, { APP_FONT_FAMILY, SUSSOL_ORANGE } from '../globalStyles';
import { generalStrings, buttonStrings } from '../localization';
import { OnePressButton, SearchBar } from '.';
import ResultRow from './ResultRow';
import { WHITE } from '../globalStyles/colors';

const keyExtractor = item => item.id || item.name;

const MultiSelectList = ({
  options,
  sortByString,
  queryString,
  queryStringSecondary,
  primaryFilterProperty,
  secondaryFilterProperty,
  renderLeftText,
  renderRightText,
  showCheckIcon,
  placeholderText,
  onConfirmSelections,
  emptyMessage,
}) => {
  const [queryText, setQueryText] = useState('');
  const [selected, setSelected] = useState([]);

  const onDoneSelected = useCallback(() => onConfirmSelections(selected), [selected]);
  const onSelect = useCallback(
    ({ item }) =>
      setSelected(prevState =>
        prevState.indexOf(item.id) === -1
          ? [...prevState, item.id]
          : prevState.filter(selectedItem => selectedItem !== item.id)
      ),
    []
  );

  const filterResultData = () => {
    const data = options.filtered(queryString, queryText);
    const secondaryFiltered = queryStringSecondary
      ? data.filtered(queryStringSecondary, queryText)
      : data;
    const sortedData = secondaryFiltered.sorted(sortByString);
    return sortedData;
  };

  const filterArrayData = () => {
    const regexFilter = RegExp(queryText, 'i');

    return options.filter(
      optionItem =>
        regexFilter.test(optionItem[primaryFilterProperty]) ||
        regexFilter.test(optionItem[secondaryFilterProperty])
    );
  };

  const getData = () => {
    if (options && options.filtered && queryString) return filterResultData(options);
    if (Array.isArray(options) && primaryFilterProperty) return filterArrayData(options);
    return [];
  };

  const data = getData();

  const renderItem = useCallback(
    row => (
      <ResultRow
        data={row}
        onPress={onSelect}
        isSelected={selected.indexOf(row.item.id) >= 0}
        renderLeftText={renderLeftText}
        renderRightText={renderRightText}
        showCheckIcon={showCheckIcon}
      />
    ),
    [data, onSelect, renderLeftText, renderRightText, showCheckIcon]
  );

  const EmptyComponent = useCallback(
    ({ title }) => (
      <View style={localStyles.emptyContainer}>
        <Text style={localStyles.emptyText}>{title}</Text>
      </View>
    ),
    []
  );

  return (
    <View style={localStyles.container}>
      <SearchBar
        onChangeText={setQueryText}
        value={queryText}
        color={WHITE}
        placeholder={placeholderText}
      />
      <FlatList
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        keyboardShouldPersistTaps="always"
        style={localStyles.resultList}
        extraData={selected}
        ListEmptyComponent={<EmptyComponent title={emptyMessage} />}
      />

      <View style={localStyles.buttonContainer}>
        <OnePressButton
          style={localStyles.confirmButton}
          textStyle={[globalStyles.buttonText, localStyles.confirmButtonText]}
          text={buttonStrings.done}
          onPress={onDoneSelected}
        />
      </View>
    </View>
  );
};

export default MultiSelectList;
export { MultiSelectList };

MultiSelectList.propTypes = {
  options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  queryString: PropTypes.string.isRequired,
  queryStringSecondary: PropTypes.string,
  sortByString: PropTypes.string.isRequired,
  placeholderText: PropTypes.string,
  renderLeftText: PropTypes.func,
  renderRightText: PropTypes.func,
  primaryFilterProperty: PropTypes.string,
  secondaryFilterProperty: PropTypes.string,
  emptyMessage: PropTypes.string,
  onConfirmSelections: PropTypes.func,
  showCheckIcon: PropTypes.bool,
};

MultiSelectList.defaultProps = {
  placeholderText: generalStrings.start_typing_to_search,
  showCheckIcon: true,
};

const localStyles = StyleSheet.create({
  container: { flex: 1 },
  emptyContainer: { flex: 1, alignItems: 'flex-start' },
  emptyText: { fontSize: 20, fontFamily: APP_FONT_FAMILY, padding: 15 },
  buttonContainer: { alignItems: 'flex-end' },
  resultList: { marginHorizontal: 5, backgroundColor: 'white' },
  confirmButton: { ...globalStyles.button, backgroundColor: SUSSOL_ORANGE },
  confirmButtonText: { color: 'white', fontSize: 20, fontFamily: APP_FONT_FAMILY },
});

@@ -239,14 +239,8 @@
 View
-, Text
  %7D f
@@ -259,16 +259,16 @@
 ative';%0A
+
 import g
@@ -834,24 +834,8 @@
 ns,%0A
-  emptyMessage,%0A
 %7D) =
@@ -1664,17 +1664,16 @@
 , 'i');%0A
-%0A
     retu
@@ -2480,208 +2480,8 @@
 );%0A%0A
-  const EmptyComponent = useCallback(%0A    (%7B title %7D) =%3E (%0A      %3CView style=%7BlocalStyles.emptyContainer%7D%3E%0A        %3CText style=%7BlocalStyles.emptyText%7D%3E%7Btitle%7D%3C/Text%3E%0A      %3C/View%3E%0A    ),%0A    %5B%5D%0A  );%0A%0A
   re
@@ -2895,77 +2895,8 @@
 ed%7D%0A
-        ListEmptyComponent=%7B%3CEmptyComponent title=%7BemptyMessage%7D /%3E%7D%0A
     
@@ -2900,17 +2900,16 @@
      /%3E%0A
-%0A
       %3CV
@@ -3702,42 +3702,8 @@
 ng,%0A
-  emptyMessage: PropTypes.string,%0A
   on
@@ -3932,16 +3932,16 @@
 reate(%7B%0A
+
   contai
@@ -3962,138 +3962,8 @@
  %7D,%0A
-  emptyContainer: %7B flex: 1, alignItems: 'flex-start' %7D,%0A  emptyText: %7B fontSize: 20, fontFamily: APP_FONT_FAMILY, padding: 15 %7D,%0A
   bu

Add removal of empty component from MultiSelectList