import * as React from "react";
import Drawer from "@mui/material/Drawer";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { DRAWER } from "../../lib/redux/slices/appSlice";
import { Grid } from "../grid/Grid";
import { Box, Button, Typography } from "@mui/material";
import { SPACING } from "../../data/spacing";

export default function TemporaryDrawer() {
  const { drawer } = useSelector((state) => state.appSlice);
  const dispatch = useDispatch();

  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
    size: false,
    content: false,
  });

  useEffect(() => {
    dispatch(
      DRAWER({
        top: false,
        left: false,
        bottom: false,
        right: false,
        title: null,
        content: null,
        size: 310,
      })
    );
  }, []);

  useEffect(() => {
    if (!drawer) {
      setState({
        top: false,
        left: false,
        bottom: false,
        right: false,
        size: null,
        content: null,
      });
    } else {
      setState(drawer);
    }
  }, [drawer]);

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }
    dispatch(
      DRAWER({
        [anchor]: open,
      })
    );
    // setState({ ...state, [anchor]: open });
  };
  const list = (anchor) => (
    <Grid
      sx={{
        width:
          anchor === "top" || anchor === "bottom"
            ? "auto"
            : drawer.size
            ? drawer.size
            : 310,
        height: drawer.bottom ? "90vh" : "100%",
      }}
      role="presentation"
      p={SPACING.SMALL}
      // onClick={toggleDrawer(anchor, false)}
      // onKeyDown={toggleDrawer(anchor, false)}
    >
      <Grid container justifyContent="space-between" alignItems="center" mb={2}>
        <Box>
          <Typography
            variant="body1"
            color="primary"
            sx={{
              fontSize: "18px",
              fontWeight: 600,
            }}
          >
            {drawer.title}
          </Typography>
          <Box
            sx={{
              width: "70%",
              height: "3px",
              backgroundColor: "#00A991",
              marginTop: "4px",
            }}
          />
        </Box>
        <Button
          color="error"
          onClick={() => {
            dispatch(
              DRAWER({
                top: false,
                left: false,
                bottom: false,
                right: false,
                title: null,
                content: null,
                size: null,
              })
            );
          }}
          sx={{
            fontSize: "15px",
            fontWeight: 500,
          }}
        >
          بازگشت
        </Button>
      </Grid>
      <Grid py={SPACING.SMALL}>{drawer?.content}</Grid>
    </Grid>
  );

  return (
    <div>
      {["left", "right", "top", "bottom"].map((anchor) => (
        <React.Fragment key={anchor}>
          <Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
          >
            {list(anchor)}
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}
