import Box, { BoxProps } from '../box'
import { useStyleConfig, useUp, vui } from '../core'
import { cs, mergeRefs } from '../utils'
import { useHeaderContext } from './context'

/** Displays part of the Header content when on a mobile screen. */
export const HeaderMobileContent = vui<'div', BoxProps>((props, ref) => {
  const { className, ...rest } = props
  const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {}
  const styles = useStyleConfig('Header', useHeaderContext())
  const islargerThanTablet = useUp('lg')

  return isMobileOpen ? (
    <Box
      bg="white"
      className={cs('vui-headerMobileContent', className)}
      column
      overflowX="hidden"
      overflowY="auto"
      position="absolute"
      ref={mergeRefs(ref, mobileContentRef)}
      right={islargerThanTablet ? '-40px' : '-16px'}
      shadow={2}
      top="calc(100% + 1px)"
      w={islargerThanTablet ? 320 : 280}
      zIndex="100"
      {...styles.mobileContent}
      {...rest}
    />
  ) : null
})

HeaderMobileContent.displayName = 'HeaderMobileContent'
export default HeaderMobileContent
