import { Snackbar } from "@mui/material";
import React, { useContext } from "react";
import { AppContext } from "../../contexts/AppContext";
import MuiAlert from "@mui/material/Alert";

export const Notif = () => {
  const Alert = React.forwardRef(function Alert(props, ref) {
    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
  });
  const [handleNotif, notifState] = useContext(AppContext);

  const { vertical, horizontal, open, severity, msg } = notifState;

  //   const handleClick = (newState) => () => {
  //     setNotifState({ open: true, ...newState });
  //   };

  // HOW TO USE IT?
  // const [openNotif] = useContext(AppContext);
  // openNotif({
  //   vertical: "top",
  //   horizontal: "center",
  //   msg: "سلام تست",
  //   severity: "error",
  // });

  const handleClose = () => {
    handleNotif({ ...notifState, open: false });
  };

  return (
    <Snackbar
      anchorOrigin={{ vertical, horizontal }}
      key={vertical + horizontal}
      open={open}
      autoHideDuration={6000}
      onClose={handleClose}
    >
      <Alert onClose={handleClose} severity={severity} sx={{ width: "100%" }}>
        {msg}
      </Alert>
    </Snackbar>
  );
};
