import { Fab, Theme } from "@mui/material";
import { makeStyles } from "@mui/styles";
import Icon from "assets/components/heaterDark.png";
import { ImgIcon } from "common/ImgIcon";
import { useMobile } from "hooks";

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

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

export default function AddObjectHeaterFab(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="Add New Heater"
      className={classString}
      size={isMobile ? "medium" : "large"}>
      <ImgIcon alt="Add New Heater" src={Icon} />
    </Fab>
  );
}
