import { styled, useStyleConfig, vui } from '../core'
import { callAll, cs } from '../utils'
import { useModalContext } from './context'
import { ModalContentProps } from './modal.types'

export const ModalContentBase = styled.divBox`
  display: flex;
  inset: 0px;
  position: fixed;
  z-index: modal;
`

/** Wraps the content provided to the Modal component. */
export const ModalContent = vui<'div', ModalContentProps>((props, ref) => {
  const { className, ...rest } = props
  const { onBackdropClick } = useModalContext() ?? {}
  const styles = useStyleConfig('Modal', useModalContext())

  return (
    <ModalContentBase
      className={cs('vui-modalContent', className)}
      ref={ref}
      tabIndex={-1}
      {...styles.content}
      {...rest}
      onClick={callAll(props.onClick, onBackdropClick)}
    />
  )
})

ModalContent.displayName = 'ModalContent'

export default ModalContent
