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

import Image from 'components/Image';
import ClickableContainer from 'components/clickable-container';

import { getColumnSize } from 'utils/styles/grid';
import { FluidContainer, ChevronRight } from 'utils/styles/mixins';
import { breakpoints, colors } from 'utils/theme';

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

const SideBySideFluid = ({ data, themeConfig }: ImageAndTextModuleProps): JSX.Element => {
  const hasButtonText: boolean = !!data.buttonText!.trim().length;
  const textMarginBottom: [number, number] | 0 = hasButtonText ? [1, 2] : 0;
  const textPosition = data.textPosition.toLocaleLowerCase();

  return (
    <FluidContainer>
      <ClickableContainer
        isLink={data.isLink}
        externalUrl={data.externalUrl}
        internalPage={data.internalPage}
      >
        <Styles.ModuleWrapper
          textPosition={data.textPosition}
        >
          <Image
            fluid={data.image}
            css={Styles.Image}
          />
          <Styles.Text
            textPosition={data.textPosition}
            bgColour={themeConfig.backgroundColour}
            css={css`
              @media (min-width: ${breakpoints.large}) {
                ${textPosition}: ${getColumnSize(1)}px;
              }
            `}
          >
            <Text
              as="h2"
              mb={[0]}
              fontSize={[5, 6]}
              lineHeight={[5, 7]}
              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={3}
              lineHeight={3}
              color={themeConfig.bodyTextColour}
            >
              {data.body}
            </Text>

            {hasButtonText &&
              <Text
                fontWeight={600}
                color={colors.accent}
                css={ChevronRight}
              >
                {data.buttonText}
              </Text>
            }
          </Styles.Text>
        </Styles.ModuleWrapper>
      </ClickableContainer>
    </FluidContainer>
  );
};

export default SideBySideFluid;