import s from './Sidebar.module.css'
import Portal from '@reach/portal'
import { FC, useEffect, useRef } from 'react'
import {
  disableBodyScroll,
  enableBodyScroll,
  clearAllBodyScrollLocks,
} from 'body-scroll-lock'

interface SidebarProps {
  children: any
  open: boolean
  onClose: () => void
}

const Sidebar: FC<SidebarProps> = ({ children, open = false, onClose }) => {
  const ref = useRef() as React.MutableRefObject<HTMLDivElement>

  // useEffect(() => {
  //   // setTimeout(() => {
  //   //   if (ref.current && open) {
  //   //     window.document.body.style.overflow = 'hidden'
  //   //     disableBodyScroll(ref.current)
  //   //   } else {
  //   //     window.document.body.style.overflow &&
  //   //       setTimeout(() => (window.document.body.style.overflow = 'unset'), 30)
  //   //     !!ref.current && enableBodyScroll(ref.current)
  //   //   }
  //   // }, 30)
  //   return () => {
  //     clearAllBodyScrollLocks()
  //   }
  // }, [open])

  return (
    <Portal>
      {open && (
        <div className={s.root} ref={ref}>
          <div className="absolute inset-0 overflow-hidden">
            <div
              className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
              onClick={onClose}
            />
            <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
              <div className="h-full md:w-screen md:max-w-md">
                <div className={s.sidebar}>{children}</div>
              </div>
            </section>
          </div>
        </div>
      )}
    </Portal>
  )
}

export default Sidebar