import React, { FunctionComponent } from 'react';
import { Link } from 'gatsby';
import { Box, Flex } from '@rebass/emotion';
import { css } from '@emotion/core';
import { inject, observer } from 'mobx-react';

import MobileOverlay from 'components/mobile-overlay';

import { FluidContainer } from 'utils/styles/mixins';

import NavigationItem from 'components/navigation/items';

import MenuIcon from 'components/layout/header/compnents/menu-icon';

import { HeaderMobileProps } from './header-mobile.types';

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

import * as DefaultStyles from './styles/header-mobile.Default.styles';
import * as BegoniaFixedStyles from './styles/begonia/header-mobile-begonia-fixed.styles';
import * as BegoniaFloatingStyles from './styles/begonia/header-mobile-begonia-floating.styles';

import { getTheme } from 'utils/styles/style-config-factory';

import BasketIcon from '../header/compnents/basket-icon';
import { colors } from 'utils/theme';

const HeaderMobile: FunctionComponent<HeaderMobileProps> = (props): JSX.Element => {
  const { themeConfig, fontFamily, config } = props;
  const { isMobileMenuVisible, isBasketVisible } = props.uiStore!;
  const Styles = getTheme({
    default: DefaultStyles,
    layoutThemes: [
      { layoutId: HEADER.BEGONIA_FIXED, theme: BegoniaFixedStyles },
      { layoutId: HEADER.BEGONIA_FLOATING, theme: BegoniaFloatingStyles }
    ]
  }, config.layoutOption)
  return (
    <Styles.HeaderContainer
      backgroundColor={colors.textLight}
      isMobileMenuVisible={isMobileMenuVisible}
    >
      <Styles.Header
        py="14px"
        as="header"
        isMobileMenuVisible={isMobileMenuVisible}
        css={css`
          font-family: ${fontFamily};
        `}
      >
        <FluidContainer>
          <Flex justifyContent="space-between" alignItems="center">
              <MenuIcon
                isMenuVisible={isMobileMenuVisible}
                onClick={(): void => props.uiStore!.toggleMobileMenu()}
                menuFillColour={themeConfig.iconColour}
                crossStrokeColour={themeConfig.highlightColour}
              />
              <Box>
                <Box css={Styles.Logo}>
                  <Link to="/" css={Styles.Logo}>
                    <img src={props.logoIcon.url} />
                  </Link>
                </Box>
              </Box>
              <BasketIcon
                color={themeConfig.iconColour}
                onClick={(): void => props.uiStore!.toggleBasket()}
                totalItems={props.basketStore!.totalItems}
                isBasketVisible={isBasketVisible}
                crossStrokeColour={themeConfig.highlightColour}
              />
          </Flex>
        </FluidContainer>
      </Styles.Header>
        <MobileOverlay
          showContent={props.uiStore!.isMobileMenuVisible}
        >
          <Styles.NavigationList>
            {
              props.navigation.map(item => {
                const slug = !item.page ? '/shop' : item.page.fields.slug;
                return (
                  <li
                    key={item.id}
                    css={Styles.NavigationItem}
                  >
                    <NavigationItem
                      label={item.title}
                      slug={slug}
                      position="mobile"
                    />
                  </li>
                );
              })
            }
          </Styles.NavigationList>
        </MobileOverlay>
    </Styles.HeaderContainer>
  );
};

HeaderMobile.defaultProps = {
  backButtonCopy: 'Go Back'
};

export default inject('uiStore')(observer(HeaderMobile));