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,
    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,
    paddingLeft,
    paddingRight,
    paddingTop
  })
)

/**
 * Card footer, applying the tokens as per the theme used.
 */
const CardFooter = ({ children, padding, tokens, variant, ...rest }) => {
  const viewport = useViewport()
  const themeTokens = useThemeTokens(
    'Card',
    tokens,
    { ...variant, background: 'alternative' },
    { viewport }
  )

  return (
    <CardFooterContainer {...themeTokens} {...padding} {...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
}

export default CardFooter