import React from 'react';
import PropTypes from 'prop-types';

const styles = {
    wrapper: {
        textAlign: 'center',
    },
    title: {
        paddingTop: 50,
        paddingBottom: 25,
    },
    button: {
        display: 'block',
        margin: 'auto',
    },
    error: {
        display: 'inline-block',
        textAlign: 'left',
        paddingTop: 25,
    },
    errorText: {
        color: 'red',
    },
    label: {
        fontWeight: 'bold',
        marginTop: 15,
    },
};

const ErrorPage = ({ error = null, info = null }) => (
    <div style={styles.wrapper}>
        <h1 style={styles.title}>Something went wrong.</h1>
        <button style={styles.button} onClick={window.location.reload}>
            <i className="ion-refresh" />
        </button>
        {error && (
            <pre style={styles.error}>
                <span style={styles.errorText}>{error.toString()}</span>

                <div style={styles.label}>JS Stack:</div>
                {error.stack && error.stack.match(/((^.+\n){6})/m)[0]}

                <div style={styles.label}>Component Stack:</div>
                {info.componentStack.replace(/^\n+/, '')}
            </pre>
        )}
    </div>
);

ErrorPage.propTypes = {
    error: {
        stack: PropTypes.string,
    },
    info: {
        componentStack: PropTypes.string,
    },
};

export default ErrorPage;
