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

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

import { ImageAndTextModuleProps } from '../../image-and-text-module.types';
import * as Styles from './text-over-image.styles';

const TextOverImage = ({ data, themeConfig }: ImageAndTextModuleProps): JSX.Element => {
  const textPosition = data.textPosition === 'Right' ? 'flex-end' : 'flex-start';
  const hasButtonText: boolean = !!data.buttonText!.trim().length;
  const textMarginBottom: [number, number] | 0 = hasButtonText ? [1, 2] : 0;

  return (
    <FluidContainer>
      <Styles.ModuleWrapper>
        <ClickableContainer
          isLink={data.isLink}
          externalUrl={data.externalUrl}
          internalPage={data.internalPage}
        >
          <Styles.BackgroundImageWrapper>
            <Image
              isBackground={true}
              styledComponent={Styles.GatsbyBackgroundImage}
              fluid={data.image}
            />
          </Styles.BackgroundImageWrapper>
          <Flex justifyContent={textPosition}>
            <Box
              css={css`
                background: ${themeConfig.backgroundColour};
                ${Styles.TextBlock}
              `}
            >
              <Text
                as="h2"
                mb={[0]}
                fontSize={[5, 6]}
                lineHeight={[5, 6]}
                color={themeConfig.titleTextColour}
              >
                {data.heading}
              </Text>

              { data.subHeading &&
                <Text
                  as="p"
                  mb={[0, 1]}
                  fontSize={1}
                  lineHeight={1}
                  color={themeConfig.titleTextColour}
                >
                  {data.subHeading}
                </Text>
              }
              <Text
                mb={textMarginBottom}
                fontSize={[2, 3]}
                lineHeight={[2, 3]}
                color={themeConfig.bodyTextColour}
              >
                {data.body}
              </Text>
              {hasButtonText &&
                <Text
                  fontWeight={600}
                  color={colors.accent}
                  css={ChevronRight}
                >
                  {data.buttonText}
                </Text>
              }
            </Box>
          </Flex>
        </ClickableContainer>
      </Styles.ModuleWrapper>
    </FluidContainer>
  );
};

export default TextOverImage;