import React from 'react';
import { Component } from '@core/utils/BEM';
import PropTypes from 'prop-types';

// Style
/* istanbul ignore next */
if (typeof window !== 'undefined') require('./style.scss');

export default class Notification extends Component {
  constructor(props) {
    super(props, 'Notifcation');
    this.state = { open: true };
  }

  static propTypes = {
    color: PropTypes.oneOf(['graphite', 'green', 'red']),
    dismissible: PropTypes.bool,
    emoji: PropTypes.string,
    handleClick: PropTypes.func,
    position: PropTypes.oneOf(['bottom', 'top']),
  };

  static defaultProps = {
    color: 'graphite',
    dismissible: false,
  };

  handleClick = () => {
    this.setState({ open: !this.state.open });
    if (typeof this.props.handleClick === 'function') this.props.handleClick();
  };

  render() {
    const { children, color, className, dismissible, emoji, position } = this.props;
    const { open } = this.state;
    const NotificationClasses = [
      'Notification',
      `Notification_${color}`,
      `Notification_${open ? 'open' : 'close'}`,
      position && `Notification_${position}`,
      className,
    ]
      .filter(e => e)
      .join(' ');

    return (
      <div className={NotificationClasses}>
        {emoji && (
          <span aria-label="" className="Notification-Emoji" role="img">
            {emoji}
          </span>
        )}
        {children}
        {dismissible && (
          <button className="Notification-Button" onClick={this.handleClick} type="button">
            <i className="icon icon-cancel" />
          </button>
        )}
      </div>
    );
  }
}
