/* eslint-disable react/no-unused-prop-types */
/* eslint-disable react/forbid-prop-types */
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { View, FlatList, TouchableOpacity } from 'react-native';
import Cell from './DataTable/Cell';
import { dataTableStyles, GREY } from '../globalStyles/index';
import { HeaderCell, HeaderRow, TouchableNoFeedback } from './DataTable/index';
import { getItemLayout, recordKeyExtractor } from '../pages/dataTableUtilities';

/**
 * Simple table component for rendering a large list of un-changing data.
 * Only offers a selection feature.
 *
 * Usage:
 * Pass an array - data: [ { id, .. }, { id, .. }, .. ] (Also accepts a Realm Results array)
 * Also an array - columns: [ { key, alignText, title } ] (example: getColumns.js)
 * Such that each column.key is a field within an object in the data array.
 *
 * selectRow should be a function: (rowId) => { ... }
 *
 * selectedRows, an object with the shape: {rowId1: [bool], rowId2: [bool], ... } used
 * to trigger styling effects on selected rows.
 */
export const SimpleTable = React.memo(
  React.forwardRef(({ data, columns, selectRow, selectedRows, disabledRows }, ref) => {
    const {
      cellText,
      cellContainer,
      selectedRow: selectedRowStyle,
      alternateRow: alternateRowStyle,
      row: basicRowStyle,
      headerRow,
      headerCells,
    } = dataTableStyles;
    const renderCells = useCallback(
      rowData => {
        const { id } = rowData;

        return columns.map(({ key, width, alignText }, index) => {
          const disabledStyle = disabledRows?.[id] ? { color: GREY } : {};
          const textStyle = { ...cellText[alignText], ...disabledStyle };
          return (
            <Cell
              value={rowData[key]}
              viewStyle={cellContainer[alignText]}
              textStyle={textStyle}
              isLastCell={index === columns.length - 1}
              width={width}
              key={`${id}${key}`}
            />
          );
        });
      },
      [disabledRows]
    );

    const renderRow = useCallback(
      ({ item, index }) => {
        const { id } = item;
        const isDisabled = disabledRows?.[id];
        const isSelected = selectedRows?.[id];
        const rowStyle = isSelected
          ? selectedRowStyle
          : (index % 2 === 0 && alternateRowStyle) || basicRowStyle;

        return (
          <SimpleRow
            rowData={item}
            rowIndex={index}
            rowKey={id}
            style={rowStyle}
            renderCells={renderCells}
            onPress={isDisabled ? null : selectRow}
            isSelected={isSelected}
          />
        );
      },
      [selectedRows, disabledRows]
    );

    const renderHeaderCells = useCallback(
      () =>
        columns.map(({ title, width, alignText }, index) => (
          <HeaderCell
            key={title}
            title={title}
            containerStyle={headerCells[alignText]}
            textStyle={cellText[alignText]}
            isLastCell={index === columns.length - 1}
            width={width}
          />
        )),
      [columns]
    );

    const renderHeaders = useCallback(
      () => <HeaderRow style={headerRow} columns={columns} renderCells={renderHeaderCells} />,
      [columns]
    );

    return (
      <FlatList
        ref={ref}
        data={data}
        keyExtractor={recordKeyExtractor}
        getItemLayout={getItemLayout}
        renderItem={renderRow}
        stickyHeaderIndices={[0]}
        ListHeaderComponent={renderHeaders}
        extraData={selectedRows}
      />
    );
  })
);

SimpleTable.defaultProps = {
  selectedRows: {},
  disabledRows: null,
};

SimpleTable.propTypes = {
  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
  columns: PropTypes.array.isRequired,
  selectRow: PropTypes.func.isRequired,
  selectedRows: PropTypes.object,
  disabledRows: PropTypes.object,
};

const SimpleRow = React.memo(({ rowData, style, rowKey, renderCells, onPress }) => {
  const onSelect = useCallback(() => onPress(rowKey), [rowKey, onPress]);
  const Container = onPress ? TouchableOpacity : TouchableNoFeedback;
  return (
    <Container onPress={onSelect} key={rowKey}>
      <View style={style}>{renderCells(rowData)}</View>
    </Container>
  );
});

SimpleRow.defaultProps = {
  onPress: null,
};

SimpleRow.propTypes = {
  rowData: PropTypes.object.isRequired,
  rowKey: PropTypes.string.isRequired,
  style: PropTypes.object.isRequired,
  renderCells: PropTypes.func.isRequired,
  onPress: PropTypes.func,
};

@@ -1184,16 +1184,28 @@
 bledRows
+, isDisabled
  %7D, ref)
@@ -1628,16 +1628,30 @@
 ws?.%5Bid%5D
+ %7C%7C isDisabled
  ? %7B col
@@ -2078,32 +2078,44 @@
    %5BdisabledRows
+, isDisabled
 %5D%0A    );%0A%0A    co
@@ -2217,16 +2217,19 @@
 const is
+Row
 Disabled
@@ -2241,32 +2241,46 @@
 sabledRows?.%5Bid%5D
+ %7C%7C isDisabled
 ;%0A        const 
@@ -2655,16 +2655,19 @@
 ress=%7Bis
+Row
 Disabled
@@ -2789,16 +2789,39 @@
 bledRows
+, selectRow, isDisabled
 %5D%0A    );
@@ -3771,32 +3771,72 @@
 bledRows: null,%0A
+  selectRow: null,%0A  isDisabled: false,%0A
 %7D;%0A%0ASimpleTable.
@@ -3988,35 +3988,24 @@
 opTypes.func
-.isRequired
 ,%0A  selected
@@ -4062,16 +4062,46 @@
 object,%0A
+  isDisabled: PropTypes.bool,%0A
 %7D;%0A%0Acons

Add isDisabled prop to SimpleTable