import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import { messagePositionConfig } from '../../config/toastr';
import ToastrMessage from '../ToastrMessage';

// import { FormattedMessage } from 'react-intl';
// import messages from './messages';

const StyledMessageContainer = styled.div`
  position: fixed;
  width: 320px;
  transition: all .2s ease-out;
  font-family: open-sans,sans-serif;
  margin-top: 64px;
  margin-right: 32px;
  z-index: 10005;
`;

class Toastr extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(prop) {
    super(prop);
    this.state = {
      percentCompleted: 0,
      percCompleted: {},
    };
    this.percCompleted = 0;
    this.currentTime = 0;
    this.closeMessagePopup = this.closeMessagePopup.bind(this);
  }

  closeMessagePopup(messageIndex) {
    this.props.handleRemoveMessage(messageIndex);
  }

  render() {
    return (
      <StyledMessageContainer style={{ ...messagePositionConfig[this.props.position] }}>
        {this.props.messagesList.map((message) => {
          
          return <ToastrMessage key={message.messageId} timeout={this.props.timeout} messageId={message.messageId} title={message.title} text={message.text} type={message.type} handleMessageClose={this.closeMessagePopup} hideProgressBar={message.hideProgressBar} />;
        })}
      </StyledMessageContainer>
    );
  }
}

Toastr.propTypes = {
  messagesList: PropTypes.array.isRequired,
  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
  position: PropTypes.string,
  handleRemoveMessage: PropTypes.func,
};

Toastr.defaultProps = {
  type: 'info',
  timeout: '4',
  position: 'bottom right',
};
export default Toastr;
