import Box from '../box'
import { omitThemingProps, useStyleConfig, vui } from '../core'
import { Dialog } from '../dialog'
import { cs } from '../utils'
import { DrawerProps } from './drawer.types'

/** Drawer component based on Dialog. */
export const Drawer = vui<'div', DrawerProps>((props, ref) => {
  const { children, className, dialogProps, isLeft, isOpen, onClose } = omitThemingProps(props)
  const styles = useStyleConfig('Drawer', props)

  const placement = isLeft ? 'left' : 'right'

  return (
    <Dialog isOpen={isOpen} onClose={onClose} placement={placement} ref={ref} {...dialogProps}>
      <Box className={cs('vui-drawer', className)} column p={3} {...styles} h="100vh" overflow="hidden">
        {children}
      </Box>
    </Dialog>
  )
})

Drawer.displayName = 'Drawer'
export default Drawer
