import React, {StatelessComponent} from 'react'
import { css } from '@emotion/core';
import { Text } from '@rebass/emotion';
import { StaticQuery, graphql } from 'gatsby';

import { FluidContainer } from  'utils/styles/mixins';
import typography from 'utils/typography';
import { getColumnSize } from 'utils/styles/grid';
import { colors } from 'utils/theme';

import { QuoteModuleProps } from './quote-module.types';

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

const DEFAULT_COLOUR = 'primary';

const buildTextColour = (themeColour: string): string => themeColour === 'Default'
? colors[DEFAULT_COLOUR]
: colors[themeColour];

const renderAuthor = (author: string, textColour: string): JSX.Element =>
  <Text
    as="p"
    fontSize={[2, 3]}
    lineHeight={[2, 3]}
    fontWeight='normal'
    fontFamily={typography.options.bodyFontFamily!.join()}
    color={textColour}
  >
  - {author}
  </Text> 

const QuoteModule: StatelessComponent<QuoteModuleProps> = (props) => {
  const { copy, author } = props.data;
  return (
    <StaticQuery
        query={graphql`
          query QuoteModuleQuery {
            siteConfig {
              theme {
                globalHeadingTextColour { key }
              }
            }
          }
        `}
        render={({ siteConfig: { theme } }: any): JSX.Element => {
          return (
            <FluidContainer>
              <Styles.QuoteContainer
                ml={['0px', '0px', `${getColumnSize(2)}px`]}
                width={[1, 1, `${getColumnSize(8)}px`]}
                px={[1, 0, 0]}
              >
                <Text
                  css={css` ${Styles.Copy} `}
                  as="h2"
                  fontSize={[7, 8]}
                  lineHeight={[8, 8]}
                  fontWeight='normal'
                  fontFamily={typography.options.headerFontFamily!.join()}
                  color={buildTextColour(theme.globalHeadingTextColour.key)}
                >
                  "{copy}"
                </Text> 
                {author && renderAuthor(author, buildTextColour(theme.globalHeadingTextColour.key))}
            </Styles.QuoteContainer>
          </FluidContainer>
          );
        }}
      />
  )
}

export default QuoteModule