import React, { Component, ReactNode } from 'react';
import { Heading } from '@rebass/emotion';
import { StaticQuery, graphql } from 'gatsby';

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

import { HeadingModuleProps } from './heading-module.types';

export default class HeadingModule extends Component<HeadingModuleProps> {
  DEFAULT_COLOUR = 'primary';

  ALIGNMENT: any = {
    Centered: 'center',
    Left: 'left'
  };

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

  render(): ReactNode {
    return (
      <StaticQuery
        query={graphql`
          query HeadingModuleQuery {
            siteConfig {
              theme {
                globalHeadingTextColour { key }
              }
            }
          }
        `}
        render={({ siteConfig: { theme } }: any): JSX.Element => {
          return (
            <FluidContainer>
              <ClickableContainer
                isLink={this.props.data.isLink}
                externalUrl={this.props.data.externalUrl}
                internalPage={this.props.data.internalPage}
              >
                  <Heading
                    as="h2"
                    mb={1}
                    fontSize={[7, 8]}
                    lineHeight={[7, 8]}
                    textAlign={this.ALIGNMENT[this.props.data.layoutOption]}
                    color={this.buildTextColour(theme.globalHeadingTextColour.key)}
                  >
                    {this.props.data.text}
                  </Heading>
              </ClickableContainer>
            </FluidContainer>
          );
        }}
      />
    );
  }
}