import * as React from 'react'
import { Box, PolymorphicComponentProps } from 'react-polymorphic-box'

import './GatsbyImageContainer.css'

const defaultElement = 'div'

export type GatsbyImageContainerProps<
  E extends React.ElementType
> = PolymorphicComponentProps<E, {}>

/**
 * `<View>` used to wrap a `<GatsbyImage>` component when the `<GatsbyImage>`
 * component is styled to be 100% of its parent's height. This component
 * applies style overrides to the `GatsbyImage`-specific class names.
 *
 * @example
 * Basic usage:
 * <GatsbyImageContainer>
 *   <GatsbyImage fluid={fluid} css={{ height:'100%' }} />
 * </GatsbyImageContainer>
 */
export const GatsbyImageContainer: <
  E extends React.ElementType = typeof defaultElement
>(
  props: GatsbyImageContainerProps<E>,
) => React.ReactElement | null = React.forwardRef(
  <E extends React.ElementType = typeof defaultElement>(
    { ref, ...props }: GatsbyImageContainerProps<E>,
    innerRef: typeof ref,
  ) => (
    <Box
      ref={innerRef}
      as={defaultElement}
      data-siamese-gatsby-image-container=""
      {...props}
    />
  ),
)

// @ts-expect-error: Component type does not currently include displayName
GatsbyImageContainer.displayName = 'GatsbyImageContainer'