import React from 'react';
import { Box } from '@rebass/emotion';
import { Link } from 'gatsby';

import SocialIcons from 'components/social-icons';
import NavigationItem from 'components/navigation/items'

import { HeaderLeftProps } from './header-cosmos.types';

import * as Styles from './header-cosmos-default.styles';
import { SiteTheme } from 'lib';

const HeaderCosmosDefault = React.forwardRef((props: HeaderLeftProps, ref): JSX.Element => {
  const { themeConfig, fontFamily, config, toggleBasket } = props;
  const { backgroundColour, layoutOption } = config;
  return (
    <>
      <Styles.LayoutHeader
        as="header"
        ref={ref}
        bg={SiteTheme.setColour(backgroundColour, 'green')}
        font={fontFamily}
      >
        <Link to="/" css={Styles.Logo}>
          <img src={props.logo.url} />
        </Link>
        <Styles.NavigationContainer>
          <Styles.NavigationList>
            {
              props.navigation.map(item => {
                const slug = !item.page ? '/shop' : item.page.fields.slug;
                return (
                  <NavigationItem
                    headerLayoutOption={layoutOption}
                    slug={slug}
                    label={!item.page ? 'Shop' : item.title}
                    position={'left'}
                    textColor={themeConfig.textColour}
                  />
                )
              })
            }
          <Styles.MenuSeperator />
          <NavigationItem
            headerLayoutOption={layoutOption}
            label={'Basket'}
            position={'left'}
            onClick={toggleBasket}
            textColor={themeConfig.textColour}
          />
          </Styles.NavigationList>
        </Styles.NavigationContainer>
        { props.config.showSocial &&
          <Styles.SocialIcons>
            <SocialIcons
              iconFill={themeConfig.iconColour}
              size="25px"
            />
          </Styles.SocialIcons>
        }
      </Styles.LayoutHeader>
      <Box css={Styles.LayoutContent}>
        {/* <FluidContainer css={Styles.BasketIconWrapper}>
          <Flex justifyContent="flex-end">
            {!uiStore!.isBasketVisible &&
              <Styles.BasketIcon background={themeConfig.highlightColour}>
                <BasketIcon
                  crossStrokeColour={colors.textDark}
                  isBasketVisible={isBasketVisible}
                  onClick={toggleBasket}
                  color={colors.textLight}
                  totalItems={props.basketStore!.totalItems}
                />
              </Styles.BasketIcon>
            }
          </Flex>
        </FluidContainer> */}
        {props.children}
      </Box>
    </>
  );
});

export default HeaderCosmosDefault;