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

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

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

export default function InboxMessage({ message, externalLink, created, onClick, severity, read, children, icon, onDismiss, ...props }) {

  const wrapperClasses = classNames({
    [styles.message]: true,
    [styles.clickable]: onClick,
    [styles.read]: read,
    [styles.critical]: severity === 0,
    [styles.high]: severity === 1,
    [styles.medium]: severity === 2,
    [styles.normal]: !severity || severity > 2
  });

  const figureClasses = classNames({
    [styles.figure]: true,
    [styles.critical]: severity === 0,
    [styles.high]: severity === 1,
    [styles.medium]: severity === 2,
    [styles.normal]: !severity || severity > 2
  });

  const infoClasses = classNames({
    [styles.info]: true
  });

  const textClasses = classNames({
    [styles.text]: true
  });

  const iconName = icon || getIconName(severity);

  const handleDismiss = (e) => {
    e.stopPropagation();
    e.preventDefault();

    if (onDismiss) onDismiss();
  };

  return (
    <div className={wrapperClasses} onClick={onClick}>
      <MediaObject center figure={<div className={figureClasses}><Icon name={iconName} /></div>}>
        <MediaObject
          reverse
          center
          figure={onDismiss && (
            <div onClick={handleDismiss} style={{ marginRight: 10, cursor: 'pointer' }}>
              <Icon name="doka-icon-success" />
            </div>
          )}
        >
          <div className={infoClasses}>
            {moment(created).calendar()}
            {
              externalLink && <i className="doka-icon-externallink" style={{ marginLeft: 5 }} />
            }
          </div>
          <div className={textClasses}>
            <Markdown source={message || children} />
          </div>
        </MediaObject>
      </MediaObject>
    </div>
  );
}

function getIconName(severity) {
  if (severity === 0) {
    return 'doka-icon-alertbubble';
    // eslint-disable-next-line no-else-return
  } else if (severity === 1) {
    return 'doka-icon-warningbubble';
  } else if (severity === 2) {
    return 'doka-icon-question';
  }
  return 'doka-icon-info';
}

InboxMessage.propTypes = {
  children: PropTypes.node,
  message: PropTypes.string,
  icon: PropTypes.string,
  externalLink: PropTypes.bool,
  created: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object
  ]),
  severity: PropTypes.number,
  read: PropTypes.bool,
  disabled: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  onDismiss: PropTypes.func,
  onClick: PropTypes.func
};

InboxMessage.defaultProps = {
  children: undefined,
  message: undefined,
  icon: undefined,
  externalLink: undefined,
  created: undefined,
  severity: undefined,
  read: undefined,
  disabled: undefined,
  style: undefined,
  onDismiss: undefined,
  onClick: undefined
};