import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';
import Icon from '@material-ui/core/Icon';

const styles = theme => ({
    DialogIcon: {
        position: 'absolute',
        right: 24,
        top: 20,
        [theme.breakpoints.down('xs')]: {
            right: theme.smallScreen.padding,
        },
        '&:hover': {
            cursor: 'pointer',
        },
    },
});

class UIDialog extends React.Component {
    static propTypes = {
        classes: PropTypes.object.isRequired,
        children: PropTypes.node,
        dialogClassName: PropTypes.string,
        paperClassName: PropTypes.string,
        onClose: PropTypes.func,
        dialogTitle: PropTypes.string,
    };

    render() {
        const {
            classes,
            onClose,
            dialogTitle,
            children,
            dialogClassName,
            paperClassName,
            ...other
        } = this.props;

        return (
            <Dialog
                fullScreen
                className={dialogClassName}
                classes={{ paper: paperClassName }}
                onClose={onClose}
                {...other}
            >
                <DialogTitle>
                    <b>{dialogTitle}</b>
                    <Icon className={classes.DialogIcon} onClick={onClose}>
                        close
                    </Icon>
                </DialogTitle>
                <React.Fragment>{children}</React.Fragment>
            </Dialog>
        );
    }
}

export default withStyles(styles, { name: 'UIDialog' })(UIDialog);
