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

import Icon from './Icon';
import MediaObject from './MediaObject';
import Row from './Row';

import '../base';
import styles from './List.Item.styl';

export default function ListItem({ children, secondary, figure, figureEmpty, icon, small, src, clickable, middle = true, error, warning, info, success, onClick, ...props }) {

  let finalFigure = figure;
  if (!finalFigure && icon) finalFigure = <Icon name={icon} large={!small} style={{ position: 'relative', top: 4 }} />;
  // eslint-disable-next-line jsx-a11y/alt-text
  if (!finalFigure && src) finalFigure = <img src={src} style={{ position: 'relative', top: 2 }} />;
  if (!finalFigure && figureEmpty) finalFigure = small ? <div style={{ width: 30 }} /> : <div style={{ width: 40 }} />;

  const classes = classNames({
    [styles.listitem]: true,
    [styles.secondary]: secondary,
    [styles.clickable]: clickable,
    [styles.error]: !!error,
    [styles.warning]: !!warning,
    [styles.info]: !!info,
    [styles.success]: !!success
  });

  return (
    <div className={classes} onClick={onClick}>
      <MediaObject figure={finalFigure}>
        <Row {...props} middle={middle} style={{ minHeight: 44 }}>
          {children}
        </Row>
      </MediaObject>
    </div>
  );
}

ListItem.propTypes = {
  children: PropTypes.node,
  secondary: PropTypes.bool,
  figure: PropTypes.element,
  figureEmpty: PropTypes.bool,
  icon: PropTypes.string,
  src: PropTypes.string,
  indent: PropTypes.bool,
  small: PropTypes.bool,
  clickable: PropTypes.bool,
  middle: PropTypes.bool,
  onClick: PropTypes.func,
  error: PropTypes.bool,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool
};

ListItem.defaultProps = {
  children: undefined,
  secondary: undefined,
  figure: undefined,
  figureEmpty: undefined,
  icon: undefined,
  src: undefined,
  indent: undefined,
  small: undefined,
  clickable: undefined,
  middle: undefined,
  onClick: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined
};