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

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

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

const TextCentred = ({ data, themeConfig }: ImageAndTextModuleProps): JSX.Element => {
  const isImagePortrait = data.image !== null && data.image.fluid.aspectRatio < 1;
  const hasButtonText: boolean = !!data.buttonText!.trim().length;
  const textMarginBottom: [number, number] | 0 = hasButtonText ? [1, 2] : 0;

  return (
    <FluidContainer {...(isImagePortrait && { maxWidth: '900px' })}>
      <ClickableContainer
        isLink={data.isLink}
        externalUrl={data.externalUrl}
        internalPage={data.internalPage}
      >
        <Image fluid={data.image} />
        <Box
          css={css`
            background: ${themeConfig.backgroundColour};
            ${isImagePortrait ? Styles.TextBlock : Styles.TextBlockPortrait}
            `
          }
        >
          <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>
      </ClickableContainer>
    </FluidContainer>
  );
};

export default TextCentred;