import React, { StatelessComponent } from 'react';
import { css } from '@emotion/core';
import { Box } from '@rebass/emotion';

import Image from 'components/Image';
import ClickableContainer from 'components/clickable-container';
import { FluidContainer, AbsoluteCover } from 'utils/styles/mixins';

import { SingleImageModuleProps } from './single-image-module.types';

import * as Styles from './single-image-module.styles';

const SingleImageModule: StatelessComponent<SingleImageModuleProps> = (props) => {
  
  const { externalUrl, internalPage, fullBleed } = props.data;

  const image: JSX.Element = (
    <Image
      fluid={props.data.image}
      css={css`
        ${AbsoluteCover}
      `}
    />
  );

  const renderNonFullBleed = () =>
    <Styles.ImageContainer>
      <FluidContainer>
          {imageContainer}
      </FluidContainer>
    </Styles.ImageContainer>

  const imageContainer = (
    <ClickableContainer
      externalUrl={externalUrl}
      internalPage={internalPage}
      children={image}
    />
  );

  return (
    <Box as="figure">
      {fullBleed ? imageContainer : renderNonFullBleed()}
    </Box>
  );

}

export default SingleImageModule;