/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/core'
import * as React from 'react'

import { StyleProps, MediaQueries, Variants } from '../index'
import splitStyles from '../system/split-styles'
import { useVariant } from '../VariantProvider'

export type BoxProps = {
  /**
   * Render custom component or HTML element tag.
   */
  as?: any

  /**
   * Gain access to the internal ref
   */
  innerRef?: any

  /**
   * If true, sets "display: inline-block", otherwise it defaults to "display: block"
   */
  inline?: boolean

  /**
   * Controls display property. If `false` sets `display: none`, otherwise defaults to initial display value.
   */
  visible?: boolean
} & StyleProps

type Props = React.RefAttributes<any> &
  React.HTMLAttributes<any> &
  BoxProps &
  MediaQueries<BoxProps> &
  Variants<BoxProps>

const defaultElement = 'div'

/**
 * Box is the base component that everything builds from. It is responsible for processing all style props.
 */
export function Box({ as, innerRef, inline, ...props }: Props) {
  const Element: React.ElementType = as || defaultElement
  const variant = useVariant()
  return (
    <Element
      ref={innerRef}
      {...splitStyles({
        display: inline ? 'inline-block' : 'block',
        variant,
        ...props,
      })}
    />
  )
}