import { Backdrop, Typography, styled } from "@mui/material";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { LOADING_END } from "../../lib/redux/slices/appSlice";
import { Grid } from "../grid/Grid";
import loading from "../../assets/lottie/loading.json";
import Lottie from "lottie-react";

const LoadingText = styled(Typography)(({ theme }) => ({
  color: "#fdfdff",
  fontSize: "1.2rem",
  fontWeight: 600,
  textShadow: "0 0 8px rgba(255, 255, 255, 0.7)",
}));

export const Loading = () => {
  const dispatch = useDispatch();
  const loadingState = useSelector((state) => state.appSlice.loading);

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

  return (
    <Backdrop
      sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 999999 }}
      open={loadingState}
    >
      <Grid
        container
        justifyContent="center"
        direction="column"
        alignItems="center"
      >
        <Grid width="400px" alignSelf="center">
          <Lottie animationData={loading} loop={true} />
        </Grid>
        <Grid>
          <LoadingText>لطفاً صبر کنید</LoadingText>
        </Grid>
      </Grid>
    </Backdrop>
  );
};
