import { Backdrop } from "@mui/material";
import { useContext, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { SidebarContext } from "../../contexts/SidebarContext";
import { BACKDROP_HIDE } from "../../lib/redux/slices/appSlice";

export const BackDrop = () => {
  const backdropState = useSelector((state) => state.appSlice.backdrop);
  const [, setSidebarMobileState] = useContext(SidebarContext);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(BACKDROP_HIDE());
  }, []);

  return (
    <Backdrop
      sx={{
        color: "#fff",
        zIndex: (theme) => theme.zIndex.drawer + 1,
      }}
      open={backdropState}
      onClick={() => setSidebarMobileState(false)}
    ></Backdrop>
  );
};
