import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Waypoint from 'react-waypoint';

import '../base';
import styles from './List.styl';
import cardStyles from './Card.styl';
import ListItem from './List.Item';
import ListEmptyItem from './List.EmptyItem';
import ListLoadingItem from './List.LoadingItem';
import ListItemCollapsible from './List.ItemCollapsible';

List.Item = ListItem;
List.EmptyItem = ListEmptyItem;
List.LoadingItem = ListLoadingItem;
List.ItemCollapsible = ListItemCollapsible;

export default function List({ secondary, indent, small, borderTop = true, onScrollToBottom, loading, style = {}, children, customEmptyIcon }) {
  const classes = classNames({
    [styles.list]: true,
    [cardStyles.list]: true,
    [styles.secondary]: secondary,
    [styles.indent]: indent,
    [styles.small]: small,
    [styles.borderTop]: borderTop
  });

  if (secondary) {
    return (
      <div className={classes} style={style}>
        <div className="row-margin" />
        <div className="rows">
          {children}
          {loading && <ListLoadingItem />}
          <div className={styles.hideIfNotFirstChild}>
            <ListEmptyItem customEmptyIcon={customEmptyIcon} />
          </div>
          {onScrollToBottom && (
            <Waypoint onEnter={onScrollToBottom} scrollableAncestor={window} />
          )}
        </div>
      </div>
    );
  }

  return (
    <div className={classes} style={style}>
      {children}
      {loading && <ListLoadingItem />}
      <div className={styles.hideIfNotFirstChild}>
        <ListEmptyItem customEmptyIcon={customEmptyIcon} />
      </div>
      {onScrollToBottom && (
        <Waypoint onEnter={onScrollToBottom} scrollableAncestor={window} />
      )}
    </div>
  );
}

List.propTypes = {
  children: PropTypes.node,
  secondary: PropTypes.bool,
  indent: PropTypes.bool,
  small: PropTypes.bool,
  borderTop: PropTypes.bool,
  loading: PropTypes.bool,
  onScrollToBottom: PropTypes.func,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  customEmptyIcon: PropTypes.string
};

List.defaultProps = {
  children: undefined,
  secondary: undefined,
  indent: undefined,
  small: undefined,
  borderTop: undefined,
  loading: undefined,
  onScrollToBottom: undefined,
  style: undefined,
  customEmptyIcon: undefined
};