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: $alignSelf,
    backgroundColor: $backgroundColor
  })
)

/**
 * Card content, applying the card tokens as per the theme used.
 */
export 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
    }

    const {
      borderRadius,
      paddingBottom,
      paddingLeft,
      paddingRight,
      paddingTop,
      contentAlignItems,
      contentFlexGrow,
      contentFlexShrink,
      contentJustifyContent,
      borderWidth,
      alignSelf,
      backgroundColor
    } = themeTokens

    return (
      <CardContentContainer
        $borderRadius={borderRadius}
        $paddingBottom={paddingBottom}
        $paddingLeft={paddingLeft}
        $paddingRight={paddingRight}
        $paddingTop={paddingTop}
        $contentAlignItems={contentAlignItems}
        $contentFlexGrow={contentFlexGrow}
        $contentFlexShrink={contentFlexShrink}
        $contentJustifyContent={contentJustifyContent}
        $borderWidth={borderWidth}
        $alignSelf={alignSelf}
        $backgroundColor={backgroundColor}
        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
}