import React from 'react'
import PropTypes from 'prop-types'
import { StackView } from '@telus-uds/components-base'
import { CardContent } from './CardContent'
import { FullBleedContent } from '../shared/FullBleedContent'
import { ConditionalWrapper } from '../shared/ConditionalWrapper/ConditionalWrapper'
import { DynamicWidthContainer, FullBleedPaddingWrapper } from './Card.styles'
import { getCardContentTokens, getStackViewTokens } from './helpers'

/**
 * Renders the non-interactive full-bleed layout: a `StackView` with the card
 * content and the full-bleed image/video stacked according to position.
 */
export const FullBleedLayout = ({
  tokens,
  variant,
  withFooter,
  backgroundImage,
  children,
  contentStackDirection,
  contentStackAlign,
  columnFlex,
  contentWrapperStyleProps,
  imageWrapperStyleProps,
  isImageWidthAdjustable,
  isHorizontalFullBleed,
  isVerticalFullBleed,
  fullBleedContentPosition,
  fullBleedContentChildrenAlign,
  fullBleedContentPropsClean,
  fullBleedBorderRadius,
  fullBleedPaddingValues,
  hasFullBleedPadding,
  testID
}) => (
  <StackView
    direction={contentStackDirection}
    tokens={getStackViewTokens(columnFlex, contentStackAlign)}
    space={0}
  >
    {children ? (
      <ConditionalWrapper
        WrapperComponent={DynamicWidthContainer}
        wrapperProps={contentWrapperStyleProps}
        condition={isImageWidthAdjustable}
      >
        <CardContent
          tokens={getCardContentTokens(tokens, {
            backgroundImage,
            fullBleedContentChildrenAlign
          })}
          variant={variant}
          withFooter={withFooter}
          backgroundImage={backgroundImage}
          data-testid={testID && `${testID}-card-content`}
        >
          {children}
        </CardContent>
      </ConditionalWrapper>
    ) : null}
    <ConditionalWrapper
      WrapperComponent={DynamicWidthContainer}
      wrapperProps={imageWrapperStyleProps}
      condition={isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed}
    >
      <ConditionalWrapper
        WrapperComponent={FullBleedPaddingWrapper}
        wrapperProps={fullBleedPaddingValues}
        condition={hasFullBleedPadding}
      >
        <FullBleedContent
          borderRadius={fullBleedBorderRadius}
          {...fullBleedContentPropsClean}
          position={fullBleedContentPosition}
          cardState={undefined}
          testID={testID && `${testID}-card-full-bleed`}
        />
      </ConditionalWrapper>
    </ConditionalWrapper>
  </StackView>
)

FullBleedLayout.propTypes = {
  tokens: PropTypes.object,
  variant: PropTypes.object,
  withFooter: PropTypes.bool,
  backgroundImage: PropTypes.object,
  children: PropTypes.node,
  contentStackDirection: PropTypes.string,
  contentStackAlign: PropTypes.string,
  columnFlex: PropTypes.object,
  contentWrapperStyleProps: PropTypes.object,
  imageWrapperStyleProps: PropTypes.object,
  isImageWidthAdjustable: PropTypes.bool,
  isHorizontalFullBleed: PropTypes.bool,
  isVerticalFullBleed: PropTypes.bool,
  fullBleedContentPosition: PropTypes.string,
  fullBleedContentChildrenAlign: PropTypes.string,
  fullBleedContentPropsClean: PropTypes.object,
  fullBleedBorderRadius: PropTypes.object,
  fullBleedPaddingValues: PropTypes.object,
  hasFullBleedPadding: PropTypes.bool,
  testID: PropTypes.string
}