import React from "react";
import Button from "../Button";
import style from "./style";

/**
 * A drawer is an expandable sidebar that slides in into your page from a
 * direction of your choosing.
 * @param {object} props The props
 * @returns {function} The component
 */
const Drawer = props => {
  if (!props.hidden) {
    let position;
    if (props.inline && props.position === "LEFT") {
      position = style.inlineStyle;
    } else if (props.position.toUpperCase() === "RIGHT") {
      position = { right: 0 };
    } else if (props.position.toUpperCase() === "TOP") {
      position = { top: 0, width: "100%", height: 200 };
    } else if (props.position.toUpperCase() === "BOTTOM") {
      position = { bottom: 0, width: "100%", height: 200 };
    } else {
      position = { left: 0 };
    }

    return (
      <div role="group" style={props.style}>
        {props.overlay ? (
          <div
            style={{ ...style.overlay, ...props.overlayStyle }}
            onClick={props.onClose}
          />
        ) : null}
        <div style={{ ...style.drawer, ...position, ...props.style }}>
          {props.showClose ? (
            <Button style={style.closeBtn} icon onClick={props.onClose}>
              close
            </Button>
          ) : null}
          {props.children}
        </div>
      </div>
    );
  }
  return null;
};

Drawer.defaultProps = {
  overlay: true,
  position: "LEFT",
  inline: false,
  autoclose: true,
  hidden: false,
  showClose: true
};

export default Drawer;