import React, { Component } from 'react';
import { graphql, StaticQuery } from 'gatsby';
import hexToRgba from 'hex-rgba';

import { SiteTheme } from 'lib';

import ClickableContainer from 'components/clickable-container';
import { ColourConfig } from 'types/theme';
import { HeroModuleLayoutOption } from 'types/generator-page';

import { HeroData, HeroModuleProps, HeroThemeConfig } from './hero-module.types';
import { HERO } from '../../../../utils/constants/layouts-names';

import CentreFloating from './layouts/centre-floating';
import RightFloating from './layouts/right-floating';
import LeftFloating from './layouts/left-floating';
import RightFloatOverlap from './layouts/right-float-overlap';
import FloatingBottom from './layouts/floating-bottom';
import CentreFloatOverlap from './layouts/centre-float-overlap';
import LeftFloatOverlap from './layouts/left-float-overlap';
import BegoniaFull from './layouts/begonia-full';

const heroLayouts: { [key in HeroModuleLayoutOption]: React.ReactNode } = {
  [HERO.RIGHT_FLOATING]: RightFloating,
  [HERO.CENTER_FLOATING]: CentreFloating,
  [HERO.LEFT_FLOATING]: LeftFloating,
  [HERO.RIGHT_FLOAT_OVERLAP]: RightFloatOverlap,
  [HERO.LEFT_FLOAT_OVERLAP]: LeftFloatOverlap,
  [HERO.BOTTOM_FLOATING]: FloatingBottom,
  [HERO.CENTER_FLOAT_OVERLOAP]: CentreFloatOverlap,
  [HERO.BEGONIA_FULL]: BegoniaFull
};

export default class HeroModule extends Component<HeroModuleProps> {
  /**
   * default background opacity, if value not returned
   * from the API.
   */
  HERO_BG_OPACITY = 0.9;

  /**
   * default colour options for hero layout. Will be used if
   * "default" option is provided from the API.
   */
  HERO_THEME_DEFAULTS = {
    backgroundColour: 'primary',
    titleTextColour: 'accent',
    bodyTextColour: 'textLight'
  };

  buildHeroColours(theme: HeroThemeConfig): ColourConfig {
    return SiteTheme.buildThemeConfig(this.HERO_THEME_DEFAULTS, {
      backgroundColour: theme.heroBackgroundColour,
      titleTextColour: theme.heroTitleTextColour,
      bodyTextColour: theme.heroBodyTextColour
    });
  }

  static setBackgroundColour(bgColour: string): string {
    return hexToRgba(bgColour, 100);
  }

  render(): JSX.Element | null {
    const HeroComponent: any = heroLayouts[this.props.data.layoutOption];

    if (HeroComponent) {
      return (
        <StaticQuery
          query={graphql`
            query HeroModuleQuery {
              siteConfig {
                theme {
                  heroBodyTextColour { key }
                  heroTitleTextColour { key }
                  heroBackgroundColour { key }
                }
              }
            }
          `}
          render={({siteConfig: {theme}}: HeroData): JSX.Element => {
            const themeConfig: ColourConfig = this.buildHeroColours(theme);

            return (
              <ClickableContainer
                isLink={this.props.data.isLink}
                externalUrl={this.props.data.externalUrl}
                internalPage={this.props.data.internalPage}
              >
                <HeroComponent
                  themeConfig={themeConfig}
                  bgColour={HeroModule.setBackgroundColour(themeConfig.backgroundColour)}
                  {...this.props}
                />
              </ClickableContainer>
            );
          }}
        />
      );
    }

    return null;
  }
}