import * as React from 'react'

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

export type CardProps = {
  /** Adds a slightly higher contrast background. */
  subdued?: boolean
} & StackViewProps

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

function Section({ subdued, ...restProps }: Props) {
  return (
    <StackView
      width="100%"
      padding={1}
      backgroundColor={subdued ? 'surfaceSecondary' : undefined}
      {...restProps}
    />
  )
}

export function Card({ children, subdued, radius = 3, ...restProps }: Props) {
  const cardTheme = useThemeValue('card')
  return (
    <StackView
      width="100%"
      lineHeight={2.5}
      borderColor="separatorTertiary"
      borderStyle="solid"
      borderWidth={1}
      backgroundColor={subdued ? 'surfaceSecondary' : 'surface'}
      color="foreground"
      radius={radius}
      {...cardTheme}
      {...restProps}
    >
      {radius > 0
        ? cloneChildren(children, (child, { firstChild, lastChild }) =>
            child.props.radius === undefined
              ? firstChild
                ? {
                    [`radius${
                      restProps.axis === 'horizontal' ? 'Left' : 'Top'
                    }`]: (radius as number) - 1,
                  }
                : lastChild
                ? {
                    [`radius${
                      restProps.axis === 'horizontal' ? 'Right' : 'Bottom'
                    }`]: (radius as number) - 1,
                  }
                : {}
              : {}
          )
        : children}
    </StackView>
  )
}

Card.Section = Section