import React from 'react';
import { Box, Flex } from '@rebass/emotion';
import { Link } from 'gatsby';
import { css } from '@emotion/core';

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

import SocialIcons from 'components/social-icons';
import BasketIcon from '../compnents/basket-icon';

import NavigationItem from 'components/navigation/items'

import * as Styles from './header-left.styles';
import { colors } from 'utils/theme';

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

const HeaderLeft = React.forwardRef((props: HeaderLeftProps, ref): JSX.Element => {
  const { themeConfig, toggleBasket, uiStore, isBasketVisible, fontFamily } = props;
  return (
    <>
      <Flex
        ref={ref}
        flexDirection="column"
        alignItems="flex-end"
        as="header"
        bg={themeConfig.backgroundColour}
        px="40px"
        py="30px"
        width="300px"
        css={
          css`
            ${Styles.LayoutHeader}
            font-family: ${fontFamily};
          `
        }
      >
        <Link to="/" css={Styles.Logo}>
          <img src={props.logo.url} />
        </Link>
        <Box mt={4}>
          <ul css={Styles.NavigationList}>
            {
              props.navigation.map(item => {
                const slug = !item.page ? '/shop' : item.page.fields.slug;
                return (
                  <NavigationItem
                    slug={slug}
                    label={!item.page ? 'Shop' : item.title}
                    position={'left'}
                    textColor={themeConfig.textColour}
                  />
                )
              })
            }
          </ul>
        </Box>
        { props.config.showSocial &&
          <Styles.SocialIcons>
            <SocialIcons
              iconFill={themeConfig.iconColour}
              size="25px"
            />
          </Styles.SocialIcons>
        }
      </Flex>
      <Box css={Styles.LayoutContent}>
        <FluidContainer css={Styles.BasketIconWrapper}>
          <Flex justifyContent="flex-end">
            {!uiStore!.isBasketVisible &&
              <Styles.BasketIcon background={themeConfig.highlightColour}>
                <BasketIcon
                  onClick={toggleBasket}
                  color={colors.textLight}
                  totalItems={props.basketStore!.totalItems}
                />
              </Styles.BasketIcon>
            }
          </Flex>
        </FluidContainer>
        {props.children}
      </Box>
    </>
  );
});

export default HeaderLeft;