import type { ComponentType, ReactNode, ReactElement } from 'react'
import { ScrollViewProps } from 'react-native'
import { ResponsiveSpacing, SemanticTag } from './Common'

export type BoxVariants = {
  background?:
    | 'lightest'
    | 'lighter'
    | 'light'
    | 'dark'
    | 'darker'
    | 'darkest'
    | 'critical'
    | 'danger'
    | 'warning'
    | 'positive'
    | 'black'
    | 'featurePrimary'
    | 'featureSecondary'
    | 'featureNeutral'
    | 'featureBrand'
}

export type BoxTokens = {
  backgroundColor?: string
  gradient?: string
  borderWidth?: number
  borderColor?: string
  borderTopLeftRadius?: number
  borderTopRightRadius?: number
  borderBottomLeftRadius?: number
  borderBottomRightRadius?: number
}

export interface BoxProps {
  children: ReactNode | ReactElement
  horizontal?: ResponsiveSpacing | number
  vertical?: ResponsiveSpacing | number
  top?: ResponsiveSpacing | number
  bottom?: ResponsiveSpacing | number
  left?: ResponsiveSpacing | number
  right?: ResponsiveSpacing | number
  variant?: BoxVariants
  tokens?: BoxTokens
  space?: ResponsiveSpacing | number
  flex?: number
  scroll?: boolean | ScrollViewProps
  tag?: SemanticTag
  testID?: string
  accessibilityLabel?: string
  accessible?: boolean
  customGradient?: (...args: any[]) => ReactNode
  backgroundImage?: any
  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
  onLayout?: (event: any) => void
  nativeID?: string
  dataSet?: Record<string, any>
}

declare const Box: ComponentType<BoxProps>

export { Box }