import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import ResponsiveImage from '../../ResponsiveImage'

// Interactive overlay opacity constants
const OVERLAY_OPACITY_PRESSED = 0.2
const OVERLAY_OPACITY_HOVER = 0.1
const OVERLAY_OPACITY_DEFAULT = 0

const selectFullBleedContentProps = ({
  alt,
  height,
  loading,
  src,
  width,
  fallbackSrc = src,
  lgSrc = src,
  mdSrc = src,
  smSrc = src,
  xlSrc = src,
  xsSrc = src
}) => ({
  alt,
  height,
  loading,
  src,
  width,
  fallbackSrc,
  lgSrc,
  mdSrc,
  smSrc,
  xlSrc,
  xsSrc
})

const FullBleedContentContainer = styled.div(
  ({
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderTopLeftRadius,
    borderTopRightRadius,
    opacity,
    transform,
    hasCardState
  }) => ({
    position: hasCardState ? 'relative' : 'static',
    overflow: 'hidden',
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderTopLeftRadius,
    borderTopRightRadius,
    opacity,
    transform,
    transition: 'opacity 0.2s ease, transform 0.2s ease'
  })
)

const InteractiveOverlay = styled.div(({ overlayOpacity, overlayBackgroundColor }) => ({
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: overlayBackgroundColor || 'rgba(0, 0, 0, 0.1)',
  opacity: overlayOpacity || 0,
  pointerEvents: 'none',
  transition: 'opacity 0.2s ease',
  zIndex: 1
}))

/**
 * Full bleed content component can accept either a single source,
 * a number of sources corresponding to the `ResponsiveImage` component API,
 * or a custom component.
 */
const FullBleedContent = ({ borderRadius, content, cardState, ...rest }) => {
  let overlayOpacity = OVERLAY_OPACITY_DEFAULT
  if (cardState) {
    if (cardState.pressed) {
      overlayOpacity = OVERLAY_OPACITY_PRESSED
    } else if (cardState.hover) {
      overlayOpacity = OVERLAY_OPACITY_HOVER
    }
  }

  return (
    <FullBleedContentContainer {...borderRadius} hasCardState={!!cardState}>
      {content ?? <ResponsiveImage {...selectFullBleedContentProps(rest)} />}
      {cardState && <InteractiveOverlay overlayOpacity={overlayOpacity} />}
    </FullBleedContentContainer>
  )
}

FullBleedContent.propTypes = {
  /**
   * Content border radius matching the edge values on the parent card.
   */
  borderRadius: PropTypes.shape({
    borderBottomLeftRadius: PropTypes.number,
    borderBottomRightRadius: PropTypes.number,
    borderTopLeftRadius: PropTypes.number,
    borderTopRightRadius: PropTypes.number
  }),
  /**
   * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
   */
  content: PropTypes.node,
  /**
   * Card state object containing interactive states (hover, pressed, focused).
   */
  cardState: PropTypes.shape({
    hover: PropTypes.bool,
    pressed: PropTypes.bool,
    focused: PropTypes.bool
  }),
  /**
   * Image source.
   */
  src: PropTypes.string,
  /**
   * Also accept props for `ResponsiveImage`...
   */
  ...ResponsiveImage.propTypes,
  /**
   * ...but make the required ones optional.
   */
  alt: PropTypes.string,
  xsSrc: PropTypes.string,
  smSrc: PropTypes.string,
  fallbackSrc: PropTypes.string
}

export default FullBleedContent