import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import CustomDialog from 'Shared/Components/CustomDialog';
import { t } from 'Framework/i18n';
import MainButton from 'Shared/Components/MainButton';

const styles = () => ({
    dialogWrapper: {
        zIndex: '1301 !important',
    },
    activeButton: {
        textTransform: 'none',
        whiteSpace: 'nowrap',
        margin: '0 12px 8px 0',
        padding: '4px 15px',
        color: 'white',
        textDecoration: 'none',
    },
});

class AlertDialog extends React.Component {
    static propTypes = {
        classes: PropTypes.object.isRequired,
        dismissMessage: PropTypes.func.isRequired,
        message: PropTypes.string,
        title: PropTypes.string,
    };

    static defaultProps = {
        message: null,
        title: null,
    };

    handleClose = () => {
        this.props.dismissMessage();
    };

    render() {
        const { classes, message, title } = this.props;

        return (
            (message && (
                <CustomDialog
                    className={classes.dialogWrapper}
                    open={true}
                    onClose={this.handleClose}
                    onCancel={this.handleClose}
                    dialogTitle={title}
                >
                    <DialogContent>
                        <DialogContentText dangerouslySetInnerHTML={{ __html: message }} />
                    </DialogContent>
                    <DialogActions>
                        <MainButton
                            variant="contained"
                            onClick={this.handleClose}
                            className={classes.activeButton}
                        >
                            {t('okButtonLabel')}
                        </MainButton>
                    </DialogActions>
                </CustomDialog>
            )) ||
            null
        );
    }
}

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