import React from 'react'
import PropTypes from 'prop-types'
import {
  getTokensPropType,
  selectSystemProps,
  variantProp,
  useTheme,
  StyleSheet,
  createMediaQueryStyles,
  useAllViewportTokens
} from '@telus-uds/components-base'
import styled from 'styled-components'
import { htmlAttrs } from '../utils'

const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])

const CardContentContainer = styled.div(
  ({
    borderRadius,
    paddingBottom,
    paddingLeft,
    paddingRight,
    paddingTop,
    withFooter,
    contentAlignItems: alignItems,
    contentFlexGrow: flexGrow,
    contentFlexShrink: flexShrink,
    contentJustifyContent: justifyContent,
    borderWidth,
    alignSelf,
    backgroundColor
  }) => ({
    // We need to make sure to have sharp corners on the bottom
    // if the card has a footer
    borderBottomLeftRadius: withFooter ? 0 : borderRadius,
    borderBottomRightRadius: withFooter ? 0 : borderRadius,
    borderTopLeftRadius: borderRadius,
    borderTopRightRadius: borderRadius,
    paddingBottom: paddingBottom - borderWidth,
    paddingLeft: paddingLeft - borderWidth,
    paddingRight: paddingRight - borderWidth,
    paddingTop: paddingTop - borderWidth,
    display: 'flex',
    flexDirection: 'column',
    alignItems,
    flexGrow,
    flexShrink,
    justifyContent,
    alignSelf,
    backgroundColor
  })
)

/**
 * Card content, applying the card tokens as per the theme used.
 */
const CardContent = React.forwardRef(
  (
    { children, flexContent, tokens, variant, withFooter = false, backgroundImage, ...rest },
    ref
  ) => {
    const {
      themeOptions: { enableMediaQueryStyleSheet }
    } = useTheme()

    const allTokens = useAllViewportTokens('Card', tokens, variant)

    // Override backgroundColor if explicitly set in tokens to ensure it takes priority over theme tokens
    // This is crucial for scenarios with backgroundImage where we need transparency
    if (tokens.backgroundColor !== undefined) {
      allTokens.current.backgroundColor = tokens.backgroundColor
      allTokens.xs.backgroundColor = tokens.backgroundColor
      allTokens.sm.backgroundColor = tokens.backgroundColor
      allTokens.md.backgroundColor = tokens.backgroundColor
      allTokens.lg.backgroundColor = tokens.backgroundColor
      allTokens.xl.backgroundColor = tokens.backgroundColor
    }

    // When backgroundImage is present on the Card, ensure CardContent background is transparent
    // so the background image from the parent CardBase can show through
    if (backgroundImage) {
      allTokens.current.backgroundColor = 'transparent'
      allTokens.xs.backgroundColor = 'transparent'
      allTokens.sm.backgroundColor = 'transparent'
      allTokens.md.backgroundColor = 'transparent'
      allTokens.lg.backgroundColor = 'transparent'
      allTokens.xl.backgroundColor = 'transparent'
    }

    let themeTokens
    let mediaIds

    if (enableMediaQueryStyleSheet) {
      const paddingAdjustments = {
        xs: {
          paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
          paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
          paddingRight: allTokens.xs.paddingRight - allTokens.xs.borderWidth,
          paddingTop: allTokens.xs.paddingTop - allTokens.xs.borderWidth
        },
        sm: {
          paddingBottom: allTokens.sm.paddingBottom - allTokens.sm.borderWidth,
          paddingLeft: allTokens.sm.paddingLeft - allTokens.sm.borderWidth,
          paddingRight: allTokens.sm.paddingRight - allTokens.sm.borderWidth,
          paddingTop: allTokens.sm.paddingTop - allTokens.sm.borderWidth
        },
        md: {
          paddingBottom: allTokens.md.paddingBottom - allTokens.md.borderWidth,
          paddingLeft: allTokens.md.paddingLeft - allTokens.md.borderWidth,
          paddingRight: allTokens.md.paddingRight - allTokens.md.borderWidth,
          paddingTop: allTokens.md.paddingTop - allTokens.md.borderWidth
        },
        lg: {
          paddingBottom: allTokens.lg.paddingBottom - allTokens.lg.borderWidth,
          paddingLeft: allTokens.lg.paddingLeft - allTokens.lg.borderWidth,
          paddingRight: allTokens.lg.paddingRight - allTokens.lg.borderWidth,
          paddingTop: allTokens.lg.paddingTop - allTokens.lg.borderWidth
        },
        xl: {
          paddingBottom: allTokens.xl.paddingBottom - allTokens.xl.borderWidth,
          paddingLeft: allTokens.xl.paddingLeft - allTokens.xl.borderWidth,
          paddingRight: allTokens.xl.paddingRight - allTokens.xl.borderWidth,
          paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
        }
      }

      const mediaQueryStyles = createMediaQueryStyles(paddingAdjustments)
      const baseStyle = {
        ...allTokens.current,
        ...mediaQueryStyles
      }

      const { ids, styles } = StyleSheet.create({
        cardContent: baseStyle
      })

      themeTokens = styles.cardContent
      mediaIds = ids.cardContent
    } else {
      themeTokens = allTokens.current
    }

    return (
      <CardContentContainer
        {...themeTokens}
        flexContent={flexContent}
        withFooter={withFooter}
        ref={ref}
        data-media={mediaIds}
        {...selectProps(rest)}
      >
        {children}
      </CardContentContainer>
    )
  }
)

CardContent.displayName = 'CardContent'

CardContent.propTypes = {
  ...selectedSystemPropTypes,
  /**
   * Card section content.
   */
  children: PropTypes.node,
  /**
   * Card tokens.
   */
  tokens: PropTypes.shape({
    ...getTokensPropType('Card'),
    alignSelf: PropTypes.string
  }),

  /**
   * Card variant.
   */
  variant: variantProp.propType,
  /**
   * Whether the card has a footer.
   */
  withFooter: PropTypes.bool,
  /**
   * Background image object from parent Card component.
   * When present, makes the CardContent background transparent.
   */
  backgroundImage: PropTypes.object
}

export default CardContent