import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import ErrorRounded from '@material-ui/icons/ErrorRounded';
import WarningRounded from '@material-ui/icons/WarningRounded';
import CheckCircle from '@material-ui/icons/CheckCircle';
import clsx from 'clsx';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(
    theme => ({
        root: {
            borderRadius: '4px',
            color: '#fff',
            padding: '10px 16px',
            display: 'flex',
            alignItems: 'center',
        },
        successRoot: {
            backgroundColor: theme.palette.primary.success,
        },
        warningRoot: {
            backgroundColor: theme.palette.primary.warning,
        },
        errorRoot: {
            backgroundColor: theme.palette.primary.error,
        },
        messageText: {
            color: '#fff',
            fontWeight: 500,
            fontSize: 15,
        },
        icon: {
            marginRight: 8,
        },
    }),
    { name: 'MessageBox' }
);

const MessageBox = React.forwardRef(({ text, type }, ref) => {
    const classes = useStyles();

    return (
        <div ref={ref} className={clsx(classes.root, classes[`${type}Root`])}>
            {type === 'success' && <CheckCircle className={classes.icon} />}
            {type === 'warning' && <WarningRounded className={classes.icon} />}
            {type === 'error' && <ErrorRounded className={classes.icon} />}
            <Typography variant="body1" className={classes.messageText}>
                {text}
            </Typography>
        </div>
    );
});

MessageBox.propTypes = {
    text: PropTypes.string.isRequired,
    type: PropTypes.oneOf(['success', 'warning', 'error']),
};

MessageBox.defaultProps = {
    type: 'success',
};

export default MessageBox;
