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

import { FooterOptions } from 'types/generator-site';

import FooterHorizontalThin from './horizontal-thin';
import FooterCentered from './footer-centered';
import BegoniaNewsletter from './begonia-newsletter';
import FooterNewsletter from './footer-newsletter';

import { FOOTER_THEME_DEFAULTS } from './footer.constants';
import { DynamicFooterProps } from './footer.types';
import * as Styles from './footer.styles';
import { FOOTER } from '../../../utils/constants/layouts-names';

export type FooterTypes = {
  [option in FooterOptions]: React.ReactNode;
};

const Footers: FooterTypes = {
  [FOOTER.CENTERED]: FooterCentered,
  [FOOTER.HORIZONTAL]: FooterHorizontalThin,
  [FOOTER.EMAIL_SUBSCRIBE]: FooterNewsletter,
  [FOOTER.BEGONIA_EMAIL_SUBSCRIBE]: BegoniaNewsletter
};

const Footer = (props: DynamicFooterProps): JSX.Element | null => {
  const FooterDesktop = Footers[props.config.layoutOption];

  if (!FooterDesktop) {
    LoggerService.error(`Footer layout option '${props.config.layoutOption}' does not exist`);

    return null;
  }

  const footerProps = {
    themeConfig: SiteTheme.buildThemeConfig(FOOTER_THEME_DEFAULTS, props.config),
    logo: props.logoIcon,
    ...props
  };
  return (
    <Styles.Footer useHeadingFont={props.config.useHeadingFont}>
      <FooterDesktop {...footerProps}/>
    </Styles.Footer>
  );
};

export default Footer;