import React, { FC } from 'react';
import { makeStyles } from '@material-ui/styles';
import { Paper, Typography, Box, CssBaseline } from "@material-ui/core";
import WarningIcon from "@material-ui/icons/Warning"

const styles = makeStyles(
  {
    siteErrorPage: {
      display: "flex",
      height: "100vh",
      justifyContent: "center",
      flexDirection: "column"
    },
    siteErrorPagePanel: {
      textAlign: "center",
      padding: "280px 0 40px 0",
      backgroundImage: 'url("/app/icon.png")',
      backgroundRepeat: "no-repeat",
      backgroundPosition: "50% 40px",
      backgroundSize: "200px auto",
      width: "100%",
    }
  }
);

interface ApplicationErrorProps {
  error?: string;
}

const ApplicationError: FC<ApplicationErrorProps> = ({ error }) => {
  const classes = styles();
  return (
    <div className={classes.siteErrorPage}>
      <CssBaseline />
      <Paper className={classes.siteErrorPagePanel} elevation={10}>
        <Box display="flex" flexDirection="row" justifyContent="center">
          <WarningIcon fontSize="large" color="error" />
          <Typography variant="h4" gutterBottom>
            &nbsp;Application error
          </Typography>
        </Box>
        <Typography variant="subtitle1" gutterBottom>
          Failed to configure the application, please refresh to try again.
        </Typography>
        {error &&
          (
            <Typography variant="subtitle2" gutterBottom>
              Error: {error}
            </Typography>
          )
        }
      </Paper>
    </div>
  );
}

export default ApplicationError;