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

import '../base';
import Icon from './Icon';
import styles from './Notification.styl';
import cardStyle from './Card.styl';

export default function Notification({
  children,
  acknowledgement,
  success,
  warning,
  error,
  onDismiss,
  icon: userIconName,
  visible,
  style
}) {

  const classes = classNames({
    [styles.notification]: true,
    [cardStyle.notification]: true,
    [styles.acknowledgement]: acknowledgement || success,
    [styles.warning]: warning,
    [styles.error]: error,
    [styles.info]: !(acknowledgement || warning || error || success),
    [styles.animated]: typeof visible === 'boolean',
    [styles.visible]: typeof visible === 'boolean' ? visible : true,
    [styles.hidden]: typeof visible === 'boolean' ? !visible : false
  });

  const iconName = userIconName || getIconName(acknowledgement || success, warning, error);

  return (
    <div className={classes} style={style}>
      <div className="notification-margin">
        <Icon name={iconName} />
      </div>
      <div className="notification-body">{children}</div>
      {onDismiss && (
        <div
          className="notification-dismiss-button"
        >
          <Icon name="doka-icon-close" onClick={onDismiss} />
        </div>
      )}
    </div>
  );
}

function getIconName(acknowledgement, warning, error) {
  if (error) {
    return 'doka-icon-alertbubble';
  // eslint-disable-next-line no-else-return
  } else if (warning) {
    return 'doka-icon-warningbubble';
  } else if (acknowledgement) {
    return 'doka-icon-success';
  }
  return 'doka-icon-info';
}

Notification.propTypes = {
  children: PropTypes.node,
  success: PropTypes.bool,
  warning: PropTypes.bool,
  error: PropTypes.bool,
  icon: PropTypes.string,
  visible: PropTypes.bool,
  onDismiss: PropTypes.func,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object
};

Notification.defaultProps = {
  children: undefined,
  success: undefined,
  warning: undefined,
  error: undefined,
  icon: undefined,
  visible: undefined,
  onDismiss: undefined,
  style: undefined
};