import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';

export class ValidationErrorsInfoDialog extends React.Component {
  constructor(props) {
    super(props)
    this.props = props;
    this.state = {
      open: this.props.open,
    }
  }

  componentWillReceiveProps(newProps) {
    this.setState({ open: newProps.open });
  }

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
    this.props.onDismiss();
  };

  render() {

    const actions = [
      <FlatButton
        label="Dismiss"
        primary={true}
        keyboardFocused={true}
        onClick={this.handleClose}
      />,
    ];

    return (
      <div>
        <Dialog
          title="Errors"
          actions={actions}
          modal={this.props.modal ? this.props.modal : false}
          open={this.state.open}
          onRequestClose={this.handleClose}
          overlayStyle={{ backgroundColor: 'transparent' }}
        >
          {this.props.errorMessages.map(errorMessage => {
            return (
              <div>
                <a>{errorMessage.message}</a>
                <br />
              </div>
            );
          })}
        </Dialog>
      </div>
    );
  }
}

module.exports = ValidationErrorsInfoDialog;