import React from 'react';
import {dismissError} from '../../redux/actions/error_actions';
import {connect} from 'react-redux';
import Box from '../UI/Box/Box';
import Button from '../UI/Button/Button';
import './ErrorDetails.css';

const mapStateToProps = state => {
  return {
    ErrorMessage: state.error.ErrorStack.length > 0 ? state.error.ErrorStack[0] : '',
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dismissError: () => dispatch(dismissError()),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  return (
    <Box dxStyle={{padding: '8px'}}>
      <h1 className={'ErrorDetailsHeading'}>Application Error</h1>
      <div className={'ErrorDetailsContent'}>
        <p>{props.ErrorMessage}</p>
      </div>
      <Button clicked={props.dismissError}>Dismiss</Button>
    </Box>
  );
});