import React, { useEffect, useRef, useState } from "react";
import style from "./menuDrawer.module.css";
import { KeyboardArrowLeft } from "@mui/icons-material";
import { Transition } from "react-transition-group";
const MenuDrawer = (props) => {
  const [open, setOpen] = useState(false);
  const nodeRef = useRef(null);

  const onClose = () => {
    if (props.onClose) {
      props.onClose(false);
    }
  };

  useEffect(() => {
    console.log("props.open, ", props.open);
    setOpen(props.open);
  }, [props.open]);

  return (
    <React.Fragment>
      {open && (
        <div
          className={style.drawer_overlay}
          onClick={() => setOpen(false)}
        ></div>
      )}
      <Transition
        nodeRef={nodeRef}
        in={open}
        timeout={350}
        onExited={() => onClose()}
      >
        {() => (
          <div
            className={`${style.right_drawer} ${
              open ? style.open_right_drawer : ""
            }`}
            ref={nodeRef}
          >
            <div className={style.drawer_head}>
              <div className={style.close} onClick={() => setOpen(false)}>
                {props.closeBtn && (
                  <div className="round-btn">
                    <KeyboardArrowLeft />
                  </div>
                )}
              </div>
              <div className={style.title}>
                {props.icon && props.icon} {props.title && props.title}
              </div>
            </div>
            <hr />
            <div className={style.drawer_body}>{props.children}</div>
            {props.footer && props.footer}
          </div>
        )}
      </Transition>
    </React.Fragment>
  );
};

export default MenuDrawer;
