import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"
import { DialogOverlay, DialogContent } from "@reach/dialog"
import { IconButton } from "../button"

function Drawer({ children, label, onClose, className, heading, ...props }) {
  const defaultDrawerClass = `
    bg-white
    flex
    flex-col
    fixed
    font-sans
    h-full
    max-w-2xl
    p-0
    right-0
    rounded
    shadow
    top-0
    w-4/5
  `
  const headingClass = cx(
    "flex",
    "justify-between",
    "items-center",
    "p-6",
    {
      "border-b": !!heading,
      "border-gray-200": !!heading
    }
  )
  const drawerClass = cx(className, defaultDrawerClass)
  const headingTitleClass = `
    text-gray-800
    text-2xl
    font-semibold
  `;

  return (
    <DialogOverlay onDismiss={onClose} {...props}>
      <DialogContent
        key="modal-content"
        aria-label={label}
        className={drawerClass}
        style={{ marginTop: 0, animation: "0.5s ease-in-out 0s 1 slide-in-from-right" }}
      >
        <header className={headingClass}>
          {typeof heading === "string" ? <p className={headingTitleClass}>{heading}</p> : heading }


          <IconButton
            icon="close"
            is="plain"
            label="Close drawer"
            onClick={onClose}
          />
        </header>

        <div
          className="p-6 overflow-y-auto h-full flex-1"
        >
          {children}
        </div>
      </DialogContent>
    </DialogOverlay>
  )
}

Drawer.propTypes = {
  children: PropTypes.node,
  label: PropTypes.string,
  className: PropTypes.string,
  heading: PropTypes.string,
  onClose: PropTypes.func.isRequired
}

export default Drawer
