import React from 'react'
import PropTypes from 'prop-types'
import {
  getTokensPropType,
  paddingProp,
  selectSystemProps,
  useThemeTokens,
  useViewport,
  variantProp
} from '@telus-uds/components-base'
import styled from 'styled-components'
import { htmlAttrs } from '../utils'

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

const CardFooterContainer = styled.div(
  ({
    $backgroundColor,
    $borderRadius,
    $paddingBottom,
    $paddingLeft,
    $paddingRight,
    $paddingTop
  }) => ({
    backgroundColor: $backgroundColor,
    borderBottomLeftRadius: $borderRadius,
    borderBottomRightRadius: $borderRadius,
    // @todo circle back to the following non-standard value to
    // see if it can be integrated into the palette
    boxShadow: 'inset 0px 1px 3px rgba(0, 0, 0, 0.05)',
    paddingBottom: $paddingBottom,
    paddingLeft: $paddingLeft,
    paddingRight: $paddingRight,
    paddingTop: $paddingTop
  })
)

/**
 * Card footer, applying the tokens as per the theme used.
 */
export const CardFooter = ({ children, padding, tokens, variant, ...rest }) => {
  const viewport = useViewport()
  const themeTokens = useThemeTokens(
    'Card',
    tokens,
    { ...variant, style: 'feature2' },
    { viewport }
  )
  const { paddingBottom, paddingLeft, paddingRight, paddingTop } = padding || themeTokens

  return (
    <CardFooterContainer
      $paddingBottom={paddingBottom}
      $paddingLeft={paddingLeft}
      $paddingRight={paddingRight}
      $paddingTop={paddingTop}
      $borderRadius={themeTokens.borderRadius}
      $backgroundColor={themeTokens.backgroundColor}
      {...selectProps(rest)}
    >
      {children}
    </CardFooterContainer>
  )
}

CardFooter.propTypes = {
  ...selectedSystemPropTypes,
  /**
   * Card footer content.
   */
  children: PropTypes.node,
  /**
   * Card footer padding.
   */
  padding: paddingProp.propType,
  /**
   * Card tokens.
   */
  tokens: getTokensPropType('Card'),
  /**
   * Card variant.
   */
  variant: variantProp.propType
}