import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
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 CloseIcon from '@material-ui/icons/Close';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
import messageStyles from 'ba-styles/Messages.scss';

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

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'
  },
});

function MySnackbarContent(props) {
  const {
    classes,
    className,
    message,
    onClose,
    variant,
    ...other
  } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={classNames(classes[variant], className)}
      aria-describedby="client-snackbar"
      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={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>,
      ]}
      {...other}
    />
  );
}

MySnackbarContent.propTypes = {
  classes: PropTypes.object.isRequired,
  className: PropTypes.string.isRequired,
  message: PropTypes.node.isRequired,
  onClose: PropTypes.func,
  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
};

MySnackbarContent.defaultProps = {
  onClose: () => {}
};

const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);

const styles = theme => ({
  snackbar: {
    margin: theme.spacing(1),
  },
  divider: {
    margin: `${theme.spacing(3)}px 0`,
  },
  margin: {
    margin: theme.spacing(1)
  }
});

const action = (
  <Button color="secondary" size="small">
    Action
  </Button>
);

class StyledNotif extends React.Component {
  state = {
    openStyle: false,
  };

  handleClickStyle = () => {
    this.setState({ openStyle: true });
  };

  handleCloseStyle = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    this.setState({ openStyle: false });
  };

  render() {
    const { classes } = this.props;
    return (
      <Grid container alignItems="flex-start" justify="center" direction="row" spacing={2}>
        <Grid item md={6} xs={12}>
          <Typography variant="button" className={classes.divider}>Default Styled Notification</Typography>
          <Button className={classes.margin} variant="outlined" color="primary" onClick={this.handleClickStyle}>
            Open success snackbar
          </Button>
          <Snackbar
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'left',
            }}
            open={this.state.openStyle}
            autoHideDuration={6000}
            onClose={this.handleCloseStyle}
          >
            <MySnackbarContentWrapper
              onClose={this.handleCloseStyle}
              variant="success"
              message="This is a success message!"
            />
          </Snackbar>
          <MySnackbarContentWrapper
            variant="error"
            className={classes.margin}
            message="This is an error message!"
          />
          <MySnackbarContentWrapper
            variant="warning"
            className={classes.margin}
            message="This is a warning message!"
          />
          <MySnackbarContentWrapper
            variant="info"
            className={classes.margin}
            message="This is an information message!"
          />
          <MySnackbarContentWrapper
            variant="success"
            className={classes.margin}
            message="This is a success message!"
          />
        </Grid>
        <Grid item md={6} xs={12}>
          <Typography variant="button" className={classes.divider}>Custom Styled Notification with CSS</Typography>
          <div>
            <SnackbarContent className={classes.snackbar} message="Notification default" action={action} />
            <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgInfo)} message="Notification Info" action={action} />
            <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgSuccess)} message="Success Notification Message" />
            <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgWarning)} message="I love candy. I love cookies. I love cupcakes." action={action} />
            <SnackbarContent className={classNames(classes.snackbar, messageStyles.bgError)} message="I love cheesecake. I love chocolate." action={action} />
          </div>
        </Grid>
      </Grid>
    );
  }
}

StyledNotif.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(StyledNotif);