import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import CloseIcon from '@material-ui/icons/Close';
import classNames from 'classnames';
import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined';
import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined';
import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';

import { Snackbar, IconButton, SnackbarContent } from '@material-ui/core';

const styles = theme => ({
  close: {
    width: theme.spacing(4),
  },
});

const variantIcon = {
  success: CheckCircleOutlinedIcon,
  warning: ReportProblemOutlinedIcon,
  error: ErrorOutlineOutlinedIcon,
  info: InfoOutlinedIcon,
};

const styles1 = theme => ({
  success: {
    backgroundColor: '#b6f8c4',
  },
  error: {
    backgroundColor: '#faabab',
  },
  info: {
    backgroundColor: '#b2e7f5',
  },
  warning: {
    backgroundColor: '#f5ea9f',
  },
  icon: {
    fontSize: 20,
    color: 'black'
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing(1),
  },
  message: {
    display: 'flex',
    alignItems: 'center',
    color: 'black'
  },
});

class Notification extends React.Component {
  handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    this.props.close('crudTableDemo');
  };

  render() {
    const { classes, message, variant } = this.props;
    const Icon = variantIcon[variant];
    return (
      <Snackbar
        open={message !== ''}
        autoHideDuration={3000}
        onClose={() => this.handleClose()}
        ContentProps={{
          'aria-describedby': 'message-id',
        }}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
      
      >
      <SnackbarContent
        className={classNames(classes[variant])}
        message={(
          <span id="client-snackbar" className={classes.message}>
            <Icon className={classNames(classes.icon, classes.iconVariant)} />
            {message}
          </span>
        )}
        action={[
          <IconButton
            key="close"
            aria-label="Close"
            color="inherit"
            className={classes.close}
            onClick={() => this.handleClose()}
          >
            <CloseIcon className={classes.icon}/>
          </IconButton>,
        ]}
      />
    </Snackbar>
    );
  }
}

Notification.propTypes = {
  classes: PropTypes.object.isRequired,
  close: PropTypes.func.isRequired,
  message: PropTypes.string.isRequired,
};

export default withStyles(styles1)(Notification);