import React from "react";
import HeadingUnderline from "../Typography/HeadingUnderline";
import { drawerWidth } from "./constants";
import MaterialDrawer from "@material-ui/core/Drawer";

interface Props {
  title: string;
  isOpen?: boolean;
  onClose?: () => void;
  children?: React.ReactNode;
  rightTopElements?: React.ReactNode;
}

const Drawer = React.forwardRef(
  ({ title, isOpen, onClose, rightTopElements, children }: Props, ref) => {
    return (
      <MaterialDrawer
        open={!!isOpen}
        anchor={"left"}
        classes={{ root: "auik-z-10", paper: "auik-ml-16" }}
        onClose={onClose}
        ref={ref}
      >
        <div
          className="auik-h-screen auik-bg-blue-1000 auik-px-6"
          style={{ width: drawerWidth }}
        >
          <section className="auik-flex auik-items-start auik-pt-6 auik-pb-4">
            <HeadingUnderline
              className="auik-text-white auik-break-all"
              as={"h1"}
            >
              {title}
            </HeadingUnderline>
            <div className="auik-ml-auto auik-flex auik-items-center auik-mt-1">
              {rightTopElements}
            </div>
          </section>
          {children}
        </div>
      </MaterialDrawer>
    );
  }
);

export default Drawer;