import React from 'react';
import ReactDOM from 'react-dom';
import {Message} from 'semantic-ui-react';

class FlashAlerts extends React.Component {
  render() {
    let alerts = this.props.alerts.map((alert, i) => {
      return <Alert key={i} className={alert.className} message={alert.message} />;
    });
    return alerts;
  }
}

export class Alert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {visible: true};
  }

  onDismiss = () => {
    this.setState({visible: false});
  };

  render() {
    if (this.state.visible) {
      return (
        <Message
          className={this.props.className}
          onDismiss={this.onDismiss}
          content={this.props.message}
          {...this.props}
        />
      );
    }
    return null;
  }
}

export default FlashAlerts;