import React from 'react'
import PropTypes from 'prop-types'
import { PressableCardBase } from '@telus-uds/components-base'
import { CardContent } from './CardContent'
import { getCardContentTokens, POSITION } from './helpers'

/**
 * Renders the `interactiveCard.body` branch: a `PressableCardBase`
 * wrapping the user-supplied body, plus an optional inner `CardContent`
 * when children are passed and no full-bleed content is present.
 */
export const InteractiveBody = React.forwardRef(
  (
    {
      interactiveCard,
      tokens,
      variant,
      withFooter,
      backgroundImage,
      getThemeTokens,
      dataSet,
      onPress,
      systemProps,
      children,
      fullBleedContentPosition,
      fullBleedInteractive,
      testID
    },
    ref
  ) => {
    const showInnerContent =
      children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive

    return (
      <>
        <PressableCardBase
          ref={ref}
          tokens={getThemeTokens}
          dataSet={dataSet}
          onPress={onPress}
          href={interactiveCard?.href}
          hrefAttrs={interactiveCard?.hrefAttrs}
          testID={testID && `${testID}-card-pressable-body`}
          {...systemProps}
        >
          {(cardState) => (
            <>
              {typeof interactiveCard?.body === 'function'
                ? interactiveCard.body(cardState)
                : interactiveCard.body}
            </>
          )}
        </PressableCardBase>
        {showInnerContent ? (
          <CardContent
            tokens={getCardContentTokens(tokens, { backgroundImage })}
            variant={variant}
            withFooter={withFooter}
            backgroundImage={backgroundImage}
            data-testid={testID && `${testID}-card-content`}
          >
            {children}
          </CardContent>
        ) : null}
      </>
    )
  }
)

InteractiveBody.displayName = 'InteractiveBody'

InteractiveBody.propTypes = {
  interactiveCard: PropTypes.object.isRequired,
  tokens: PropTypes.object,
  variant: PropTypes.object,
  withFooter: PropTypes.bool,
  backgroundImage: PropTypes.object,
  getThemeTokens: PropTypes.func.isRequired,
  dataSet: PropTypes.object,
  onPress: PropTypes.func,
  systemProps: PropTypes.object,
  children: PropTypes.node,
  fullBleedContentPosition: PropTypes.string,
  fullBleedInteractive: PropTypes.bool,
  testID: PropTypes.string
}