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

import '../base';
import styles from './UserCallout.styl';

import Callout from '../atoms/Callout';
import Avatar from '../atoms/Avatar';
import MediaObject from '../atoms/MediaObject';


export default function UserCallout({ left, ...props }) {

  const wrapperClasses = classNames({
    [styles.callout]: true,
    [styles.left]: left
  });

  const avatar = <Avatar isUser={!!left} {...props} style={{ marginLeft: left ? 0 : 20, marginRight: left ? 10 : 0 }} />;

  return (
    <div className={wrapperClasses}>
      <MediaObject figure={avatar} reverse={!left}>
        <Callout {...props} left={left} />
      </MediaObject>
    </div>
  );
}

UserCallout.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  label: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object
  ]),
  left: PropTypes.bool,
  children: PropTypes.node,
  name: PropTypes.string,
  src: PropTypes.string,
  error: PropTypes.bool,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool
};

UserCallout.defaultProps = {
  style: undefined,
  label: undefined,
  left: undefined,
  children: undefined,
  name: undefined,
  src: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined
};