import React, { useRef } from 'react';
import './BottomSheet.css';

export default function BottomSheet({ visible = false, title = '', onClose, children, footer }) {
  const startY = useRef(0);
  return (
    <>
      <div className={'aa-sheet-mask' + (visible ? ' is-open' : '')} onClick={onClose} />
      <div
        className={'aa-sheet' + (visible ? ' is-open' : '')}
        onPointerDown={e => { startY.current = e.clientY; }}
        onPointerUp={e => { if (startY.current - e.clientY < -80) onClose && onClose(); }}
      >
        <div className="aa-sheet-handle" />
        {title ? <div className="aa-sheet-header">{title}</div> : null}
        <div className="aa-sheet-body">{children}</div>
        {footer ? <div className="aa-sheet-footer">{footer}</div> : null}
      </div>
    </>
  );
}