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

import './draggable-dialog/css/index.css';

const defaultDialogHeight = 100; //px
const dialogHeightPerLine = 25; //px

export class ValidationErrorsInfoDialog extends React.Component {

    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() {

    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 => {
            const oneValidationMessage = (<span><a>{errorMessage.message}</a><br /></span>);
            const oneValidationMessageWithTab = (<span><li style={{ marginLeft: 2 + "em" }}>{errorMessage.message}</li></span>);

            if (errorMessage.field_name === "password-tab") {
              return oneValidationMessageWithTab;
            } else {
              return oneValidationMessage;
            }
          })}
        </Dialog>
      </div>
    );
  }
}

module.exports = ValidationErrorsInfoDialog;