import { Fab, Theme } from "@mui/material";
import { makeStyles } from "@mui/styles";
import AddBinIcon from "assets/products/bindapt/addBin.png";
import { ImgIcon } from "common/ImgIcon";
import { useMobile } from "hooks";

interface Props {
  onClick: () => void;
  pulse: boolean;
}

const useStyles = makeStyles((theme: Theme) => {
  const yellow = "#ffea00";
  return ({
    "@keyframes pulsate": {
      to: {
        boxShadow: "0 0 0 16px" + yellow + "00"
      }
    },
    fab: {
      background: yellow,
      "&:hover": {
        background: yellow
      },
      "&:focus": {
        background: yellow
      },
      position: "fixed",
      bottom: theme.spacing(8), //for mobile navigator
      right: theme.spacing(2),
      [theme.breakpoints.up("sm")]: {
        bottom: theme.spacing(2)
      }
    },
    pulse: {
      boxShadow: "0 0 0 0 " + yellow + "75",
      animation: "$pulsate 1.75s infinite cubic-bezier(0.66, 0.33, 0, 1)"
    }
  });
});

export default function AddBinFab(props: Props) {
  const { onClick, pulse } = props;
  const classes = useStyles();
  const isMobile = useMobile();

  const pulseString = pulse ? classes.pulse : "";
  const classString = classes.fab + " " + pulseString;

  return (
    <Fab
      onClick={onClick}
      aria-label="Create Bin"
      className={classString}
      size={isMobile ? "medium" : "large"}>
      <ImgIcon alt="Create Bin" src={AddBinIcon} iconHeight={"35px"} iconWidth={"35px"}/>
    </Fab>
  );
}