import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import { LoggerService, SiteTheme } from 'lib';

import { ImageAndTextModuleLayout } from 'types/generator-page';
import { ColourConfig } from 'types/theme';

import SideBySideFluid from './layouts/side-by-side-fluid';
import TextOverImage from './layouts/text-over-image';
import SideBySideFixed from './layouts/side-by-side-fixed';
import TextCentred from './layouts/text-centred';

import BegoniaSide from './layouts/begonia/begonia-side';
import BegoniaMap from './layouts/begonia/begonia-map';

import CosmosImageTextLeft from './layouts/cosmos/cosmos-image-text-left';
import CosmosImageTextRight from './layouts/cosmos/cosmos-image-text-right';

import { ImageAndTextConfig, ImageAndTextData, ImageAndTextModuleProps } from './image-and-text-module.types';
import { IMAGE_AND_TEXT } from 'utils/constants/layouts-names';

type ConfigTypes = {
  [option in ImageAndTextModuleLayout]: React.ReactNode;
};

const IMAGEANDTEXT_THEME_DEFAULTS = {
  titleTextColour: 'accent',
  backgroundColour: 'backgroundLight',
  bodyTextColour: 'textDark'
};

const config: ConfigTypes = {
  [IMAGE_AND_TEXT.SIDE_BY_SIDE_FLUID]: SideBySideFluid,
  [IMAGE_AND_TEXT.SIDE_BY_SIDE_FIXED]: SideBySideFixed,
  [IMAGE_AND_TEXT.TEXT_OVER_IMAGE]: TextOverImage,
  [IMAGE_AND_TEXT.TEXT_CENTERED]: TextCentred,
  [IMAGE_AND_TEXT.BEGONIA_TEXT_SIDE]: BegoniaSide,
  [IMAGE_AND_TEXT.BEGONIA_MAP]: BegoniaMap,
  [IMAGE_AND_TEXT.COSMOS_IMAGE_LEFT]: CosmosImageTextLeft,
  [IMAGE_AND_TEXT.COSMOS_IMAGE_RIGHT]: CosmosImageTextRight,
};

const buildTextAndImageColours = (theme: ImageAndTextConfig): ColourConfig => {
  return SiteTheme.buildThemeConfig(IMAGEANDTEXT_THEME_DEFAULTS, {
    backgroundColour: theme.textAndImageBackgroundColour,
    titleTextColour: theme.textAndImageHeadingColour,
    bodyTextColour: theme.textAndImageBodyTextColour
  });
};

const ImageAndTextModule = ({data}: ImageAndTextModuleProps): JSX.Element | null => {
  if (config[data.layoutOption]) {
    const ConfiguredComponent: any = config[data.layoutOption];

    if (!ConfiguredComponent) {
      LoggerService.error(`Image And Text layout option '${data.layoutOption}' does not exist`);

      return null;
    }

    return (
      <StaticQuery
        query={graphql`
          query TextAndImageQuery {
            siteConfig {
              theme {
                textAndImageHeadingColour { key }
                textAndImageBodyTextColour { key }
                textAndImageBackgroundColour { key }
              }
            }
          }
        `}
        render={({siteConfig: {theme}}: ImageAndTextData): JSX.Element => {
          const themeConfig: ColourConfig = buildTextAndImageColours(theme);
          return (
            <ConfiguredComponent
              themeConfig={themeConfig}
              data={data}
            />
          );
        }}
      />
    );
  }
  return null;
};

export default ImageAndTextModule;