import React from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Text, StyleSheet, View, TouchableOpacityPropTypes } from 'react-native';

/**
 *
 */
const HeaderCell = React.memo(
  ({
    title,
    columnKey,
    sortDirection,
    SortAscComponent,
    SortDescComponent,
    SortNeutralComponent,
    onPressAction,
    dispatch,
    ...otherProps
  }) => {
    const onPress = () => {
      dispatch(onPressAction(columnKey));
    };

    const Icon = () => {
      switch (sortDirection) {
        case 'ASC': {
          return SortAscComponent;
        }
        case 'DESC': {
          return SortDescComponent;
        }
        default: {
          return SortNeutralComponent;
        }
      }
    };

    const Container = onPressAction ? View : TouchableOpacity;

    return (
      <Container style={defaultStyles.headerCell} onPress={onPress} {...otherProps}>
        <Text>{title}</Text>
        {onPressAction && <Icon />}
      </Container>
    );
  }
);

HeaderCell.propTypes = {
  ...TouchableOpacityPropTypes,
  title: PropTypes.string.isRequired,
  columnKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  onPressAction: PropTypes.func,
  dispatch: PropTypes.func,
  sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
  SortAscComponent: PropTypes.element,
  SortDescComponent: PropTypes.element,
  SortNeutralComponent: PropTypes.element,
};

HeaderCell.defaultProps = {
  dispatch: null,
  onPressAction: null,
  sortDirection: null,
  SortAscComponent: null,
  SortDescComponent: null,
  SortNeutralComponent: null,
};

const defaultStyles = StyleSheet.create({
  headerCell: {
    flex: 1,
    backgroundColor: 'turquoise',
    flexDirection: 'row',
    justifyContent: 'center',
  },
});

export default HeaderCell;

@@ -163,16 +163,710 @@
 %0A%0A/**%0A *
+ Simple component to be used in conjunction with HeaderRow component.%0A *%0A * Renders a title and if passed, a sorting icon.%0A *%0A * @prop %7BString%7D       title                 Text to display in the cell%0A * @prop %7BString%7D       columnKey             The key for the column the cell heads.%0A * @prop %7BFunc%7D         onPressAction         Action for dispatching on press%0A * @prop %7BFunc%7D         dispatch              Dispatcher to backing reducer%0A * @prop %7BReactElement%7D SortAscComponent      Icon component for ascending sorting%0A * @prop %7BReactElement%7D SortDescComponent     Icon component for descending sorting%0A * @prop %7BReactElement%7D SortNeutralComponent  Icon component for neutral state, no sort.
 %0A */%0Acon

Add HeaderCell component DocString