import {createStyles, Theme, withStyles, WithStyles, WithTheme} from "@material-ui/core";
import React from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogActions from "@material-ui/core/DialogActions";
import ErrorIcon from '@material-ui/icons/Error';
import {ErrorDialogData} from "./ErrorMapper";

const styles = (theme: Theme) =>
    createStyles({});


type Props = {
    isOpen: boolean
    handleClose: () => void
    data: ErrorDialogData
} & WithStyles<typeof styles> & WithTheme

class ErrorDialog extends React.Component<Props> {
    private handleClose = () => this.props.handleClose();

    render() {
        return <div>
            <Dialog
                open={this.props.isOpen}
                onClose={this.handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                {this.props.data.title ?
                    <DialogTitle id="alert-dialog-title">{this.props.data.title}</DialogTitle> : undefined}
                <DialogContent>
                    <ErrorIcon color={"error"}/>
                    <DialogContentText id="alert-dialog-description">{this.props.data.content}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.handleClose} color="primary">
                        OK
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    }
}

export default withStyles(styles, {withTheme: true})(ErrorDialog);
