import React from 'react';
import { inject, observer } from 'mobx-react';

import typography from 'utils/typography';
import { SiteTheme, LoggerService } from 'lib';

import HeaderLeft from './header-left';
import HeaderFixed from './header-fixed';
import HeaderTop from './header-top';
import HeaderTopCenter from './header-top-center';

import HeaderBegoniaFixed from './layouts/begonia/fixed/header-begonia-fixed'
import HeaderBegoniaFloating from './layouts/begonia/floating/header-begonia-floating'
import HeaderBegoniaHybrid from './layouts/begonia/hybrid/header-begonia-hybrid'
import HeaderCosmosDefault from './layouts/cosmos/header-cosmos-default'

import HeaderMobileCosmosDefault from '../header-mobile/layouts/cosmos/header-mobile-cosmos-default';
import HeaderMobileDefault from '../header-mobile';

import { HEADER } from 'utils/constants/layouts-names';

import { HEADER_THEME_DEFAULTS  } from './header.constants';
import { HeaderTypes, HeaderProps } from './header.types';

const DESKTOP_HEADERS: HeaderTypes = {
  [HEADER.LEFT]: HeaderLeft,
  [HEADER.TOP_THIN]: HeaderTop,
  [HEADER.TOP_FIXED]: HeaderFixed,
  [HEADER.TOP_CENTER]: HeaderTopCenter,
  [HEADER.BEGONIA_FIXED]: HeaderBegoniaFixed,
  [HEADER.BEGONIA_FLOATING]: HeaderBegoniaFloating,
  [HEADER.BEGONIA_HYBRID]: HeaderBegoniaHybrid,
  [HEADER.COSMOS_DEFAULT]: HeaderCosmosDefault
};

const MOBILE_HEADERS: HeaderTypes = {
  [HEADER.COSMOS_DEFAULT]: HeaderMobileCosmosDefault,
  [HEADER.LEFT]: HeaderMobileDefault,
  [HEADER.TOP_THIN]: HeaderMobileDefault,
  [HEADER.TOP_FIXED]: HeaderMobileDefault,
  [HEADER.TOP_CENTER]: HeaderMobileDefault,
  [HEADER.BEGONIA_FIXED]: HeaderMobileDefault,
  [HEADER.BEGONIA_FLOATING]: HeaderMobileDefault,
  [HEADER.BEGONIA_HYBRID]: HeaderMobileDefault,
};

class Header extends React.Component<HeaderProps> {

  render(): JSX.Element | null {
    const { layoutOption, useHeadingFont } = this.props.config;
    const { isBasketVisible } = this.props.uiStore!;
    const DesktopHeader: any = DESKTOP_HEADERS[layoutOption];
    const MobileHeader: any = MOBILE_HEADERS[layoutOption];
    const fontFamily = useHeadingFont
      ? typography.options.headerFontFamily!.join()
      : typography.options.bodyFontFamily!.join();

    if (!DesktopHeader) {
      LoggerService.error(`Header layout option '${layoutOption}' does not exist`);
      return null;
    }

    return (
      <>
        <MobileHeader
          {...this.props}
          fontFamily={fontFamily}
          themeConfig={SiteTheme.buildThemeConfig(HEADER_THEME_DEFAULTS, this.props.config)}
        />
        <DesktopHeader
          {...this.props}
          fontFamily={fontFamily}
          toggleBasket={(): void => this.props.uiStore!.toggleBasket()}
          themeConfig={SiteTheme.buildThemeConfig(HEADER_THEME_DEFAULTS, this.props.config)}
          isBasketVisible={isBasketVisible}
        />

      </>
    );
  }
}

export default inject('uiStore', 'basketStore')(observer(Header));