import React from 'react'

import StackView from '../StackView'
import { useThemeValue } from '../system'
import { cloneChildren } from '../utils'

export type GroupProps = {
  /**
   * The direction the dividing line should span.
   */
  axis?: 'horizontal' | 'vertical'

  /**
   * Props to pass down to all children.
   */
  childProps?: Object

  /**
   * Children elements to be grouped.
   */
  children?: React.ReactNode

  /**
   * The size of the radius.
   */
  radius?: number | string
}

export function Group({
  axis = 'horizontal',
  childProps,
  children,
  radius,
  ...restProps
}: GroupProps) {
  const themeRadius = useThemeValue('group.radius')
  const radiusValue = radius ?? themeRadius

  const isHorizontalLayout = axis === 'horizontal'
  const startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop'
  const endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom'

  return (
    <StackView axis={axis} spacing={-0.125} {...restProps}>
      {cloneChildren(children, (child, { firstChild, lastChild }) => ({
        ...childProps,
        [startRadius]: firstChild ? radiusValue : 0,
        [endRadius]: lastChild ? radiusValue : 0,
      }))}
    </StackView>
  )
}