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

import Icon from './Icon';

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

export default function InboxIcon({ size, disabled, info, warning, error, blink, onClick, style, ...props }) {

  const wrapper = classNames({
    [styles.noticon]: true,
    [styles.disabled]: disabled
  });

  const outer = classNames({
    [styles.noticonOuter]: true,
    [styles.blink]: blink
  });

  const inner = classNames({
    [styles.noticonInner]: true,
    [styles.disabled]: disabled,
    [styles.info]: info,
    [styles.warning]: warning,
    [styles.error]: error,
    [styles.blink]: blink
  });

  const stats = classNames({
    [styles.noticonStats]: true,
    [styles.disabled]: disabled,
    [styles.blink]: blink
  });

  const bell = classNames({
    [styles.noticonBell]: true,
    [styles.blink]: blink
  });

  return (
    <div className={wrapper} onClick={onClick} style={style}>
      <div className={outer} />
      <div className={inner} />
      <div className={stats}>
        {
          size || <Icon name="doka-icon-bellalternative" />
        }
      </div>
      <div className={bell}><Icon name="doka-icon-bell" /></div>
    </div>
  );
}

InboxIcon.propTypes = {
  size: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  error: PropTypes.bool,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  blink: PropTypes.bool,
  disabled: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  onClick: PropTypes.func
};

InboxIcon.defaultProps = {
  size: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  blink: undefined,
  disabled: undefined,
  style: undefined,
  onClick: undefined
};