import React from 'react';
import Badge from '@material-ui/core/Badge';
import IconButton from '@material-ui/core/IconButton';
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';

const style = theme => ({
  badge: {
    top: '50%',
    right: -3,
    border: `2px solid ${
      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
    }`,
  },
});

const IconButtonWithDot = ({...props}) => {
  const {onClick,icon,showdot,value,tooltip,tooltipPosition} = props;

  const render = () => {
    return (
      <IconButton aria-label="cart" onClick={onClick}>
        <Badge color="secondary" variant={value?'standard':'dot'} invisible={!showdot} badgeContent={value?value:null}>
          {icon}
        </Badge>
      </IconButton>
    );
  }
  
  if(tooltip){
    return (
      <Tooltip placement={tooltipPosition?tooltipPosition:'bottom'} title={tooltip}>
        {render()}
      </Tooltip>
    )
  }

  return render();
};

export default withStyles(style)(IconButtonWithDot);