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

      const actions = [
        <FlatButton
          label="Dismiss"
          primary={true}
          onClick={this.handleClose}
        />,
      ];
  
      return (
        <div className="container">
            {
                this.state.open &&
                <Dialog
                    title={this.props.title ? this.props.title : 'Error'}
                    isDraggable={this.props.draggable ? this.props.draggable : false}
                    buttons={actions}
                    hasCloseIcon={false}
                    modal={this.props.modal ? this.props.modal : false}
                    height={defaultDialogHeight + this.props.errorMessages.length * dialogHeightPerLine}
                >
                    {this.props.errorMessages.map(errorMessage => {
                      return (
                        <div>
                          <a>{errorMessage.message}</a>
                          <br/>
                        </div>
                      );})
                    }
                </Dialog>
            }
        </div>
      );
    }
  }

  module.exports = ValidationErrorsInfoDialog;