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

import 'mapbox-gl/dist/mapbox-gl.css';

import { HTMLService } from 'lib';

import theme, { widths, breakpoints } from 'utils/theme';
import { FluidContainer } from 'utils/styles/mixins';

import { MapData, MapModuleProps } from './map-module.types';
import { mapModuleConfig } from './map-module.constants';
import RenderedMap from './rendered-map';

const MapModule = (props: MapModuleProps): JSX.Element => (
  <StaticQuery
    query={graphql`
      query MapQuery {
        siteConfig {
          id
          merchant {
            location {
              latitude
              longitude
            }
          }
        }
      }
    `}
    render={({ siteConfig }: MapData): JSX.Element => {
      const config = mapModuleConfig[props.data.layoutOption] || 'Centred';

      const location = {
        latitude: siteConfig.merchant.location.latitude,
        longitude: siteConfig.merchant.location.longitude
      };

      return (
        <FluidContainer>
          <Flex
            alignItems="stretch"
            flexDirection={config.flexDirection}
          >
            <Box css={config.textContentStyles}>
              <Text
                as="h3"
                fontSize={[7, 8]}
                lineHeight={[7, 8]}
              >
                {props.data.titleText}
              </Text>
              <Text
                css={css`
                  p {
                    color: ${theme.colors.textMedium};
                    font-size: ${theme.fontSizes[2]};
                    line-height: ${theme.lineHeights[2]};

                    @media (min-width: ${breakpoints.large}) {
                      font-size: ${theme.fontSizes[3]};
                      line-height: ${theme.lineHeights[7]};
                    }

                  }
              `}
                dangerouslySetInnerHTML={{
                  __html: HTMLService.htmlFromMarkdown(props.data.bodyText)
                }}
              />
            </Box>
            <Box css={config.mapStyles}>
              <RenderedMap coordinates={location}/>
            </Box>
          </Flex>
        </FluidContainer>
      );
    }}
  />
);

export default MapModule;