import React from 'react';

class Messages extends React.Component {
  state = { messages: this.props.messages };

  close = index => {
    const newMessages = this.state.messages.filter((message, currentIndex) => {
      return currentIndex != index;
    });

    this.setState({ messages: newMessages });
  };

  render() {
    const messages = this.state.messages.map((message, index) => {
      return (
        <li key={index} className={`messages__item messages__item--${message.type}`}>
          {message.text} <i className="fas fa-times" onClick={() => this.close(index)} />
        </li>
      );
    });

    return <ul className="list messages messages--fixed">{messages}</ul>;
  }
}

export default Messages;