import React from 'react'

import { BoxProps } from '../Box'
import StackView from '../StackView'

export type WrapViewProps = {
  /** The amount of space between children. */
  spacing?: number
} & BoxProps

type Props = React.RefAttributes<any> &
  React.HTMLAttributes<any> &
  WrapViewProps

let supportsFlexGap = null

function getSupportsFlexGap() {
  if (typeof document !== 'undefined' && supportsFlexGap === null) {
    const div = document.createElement('div')
    div.style.display = 'flex'
    div.style.flexDirection = 'column'
    div.style.gap = '1px'
    div.appendChild(document.createElement('div'))
    div.appendChild(document.createElement('div'))
    document.body.appendChild(div)
    supportsFlexGap = div.scrollHeight === 1
    document.body.removeChild(div)
  }
  return supportsFlexGap
}

export function WrapView({ children, spacing, ...restProps }: Props) {
  const supportsFlexGap = getSupportsFlexGap()
  const styles = {
    basis: '100%',
  } as any
  if (spacing) {
    if (supportsFlexGap) {
      styles.gap = spacing
    } else {
      styles.marginBottom = -spacing
      styles['& > *'] = {
        marginRight: spacing,
        marginBottom: spacing,
      }
    }
  }
  return (
    <StackView axis="horizontal" {...restProps}>
      <StackView wrap axis="horizontal" css={styles}>
        {children}
      </StackView>
    </StackView>
  )
}