import React, { useCallback, useEffect, useRef, useState } from "react";
import { Button, Drawer } from "@material-ui/core";
import styles from "./styles";
export default function CommonDrawer({ width, height, direction, buttonTitle, buttonColor, buttonVariant, buttonSize, buttonDisabled, buttonHidden, switchDrawer, onOpen, onClose, contentClassName, contentStyles, children }) {
    const classes = styles({ width, height });
    const [state, setState] = useState({ open: false });
    const contentRef = useRef();
    useEffect(() => {
        switchDrawer && switchDrawer > 0 && toggleDrawer();
    }, [switchDrawer]);
    const toggleDrawer = useCallback(() => {
        // handle function
        if (!state.open) {
            onOpen && setTimeout(() => onOpen({ contentRef }), 200);
        }
        else {
            onClose && setTimeout(() => onClose({ contentRef }), 200);
        }
        setState({ ...state, open: !state.open });
    }, [state.open]);
    return (<>
      {!buttonHidden && (<Button variant={buttonVariant || "text"} size={buttonSize || "medium"} color={buttonColor || "primary"} disabled={buttonDisabled} onClick={() => toggleDrawer()}>
          {buttonTitle}
        </Button>)}
      <Drawer className={classes.drawer} classes={{
        paper: classes.drawerPaper
    }} anchor={direction || "right"} open={state.open} onClose={toggleDrawer}>
        <div ref={contentRef} className={contentClassName || classes.drawContent} style={{ ...contentStyles }}>
          {children}
        </div>
      </Drawer>
    </>);
}